Выбрать все флажки (checkbox) одной кнопкой
Предположим, у Вас на сайте есть некая форма, которая содержит множество флажков (checkbox). Согласитесь, что выделять или снимать выделение с каждого флажка поочередно неудобно. Поэтому мы предлагаем Вам простой скрипт, написанный на JavaScript, который позволяет выделить или снять выделение со всех флажков формы одной кнопкой.
Ниже для примера создана форма, все флажки которой можно выбрать всего одной кнопкой «Выделить все«. Чтобы очистить все флажки, воспользуйтесь кнопкой «Снять выделение«.
Если Вам на сайт необходимо добавить точно такие же кнопки для добавления или снятия выделения сразу для всех флажков формы, то воспользуйтесь нашим JavaScript кодом, который необходимо будет поместить в тело Вашей странички:
JavaScript код:
< script type = "text/javascript" >
function check ( field , flag ) if ( flag == 1 ) < for ( i = 0 ; i < field . length ; i ++) field [ i ]. checked = true ; >
else < for ( i = 0 ; i < field . length ; i ++) field [ i ]. checked = false ; >
>
Для того чтобы кнопки работали как положено, саму форму с флажками (checkbox-ами) следует оформлять следующим образом:
< form name = "select_all" method = "post" style = "margin-left: 35px;" >
< b >Какими языками Вы владеете ?< br >
< input type = "checkbox" name = "list" value = "1" >Русский < br >
< input type = "checkbox" name = "list" value = "2" >Украинский < br >
< input type = "checkbox" name = "list" value = "3" >Белорусский < br >
< input type = "checkbox" name = "list" value = "4" >Английский < br >
< input type = "checkbox" name = "list" value = "5" >Немецкий < br >
< input type = "checkbox" name = "list" value = "6" >Другой < br >< br >
< input type = "button" value = "Выделить все" onclick = "check(this.form.list, 1)" >
< input type = "button" value = "Снять выделение" onclick = "check(this.form.list, 0)" >
Как видите, скрипт совсем простой, но зато он может быть очень полезен тем, у кого на сайте используется большое количество форм и флажков (checkbox), которые постоянно нужно выбирать.
Выделение нескольких checkbox с помощью клавиши Shift
Если вы сталкивались с Javascript, работали с jQuery, то обработка событий браузера (таких как onclick , onsubmit и др.) не вызывает у вас вопросов. Представьте, что у вас есть HTML таблица с записями, для которой нужно реализовать обработку действий в пакете, например, удалить выделенные записи или переместить все выделенные статьи в категорию. Первым шагом для этого будет добавление в таблицу чекбоксов. Как реализовать подобный функционал выделения записей мы и поговорим в данной статье.
Для примера возьмем довольно простую HTML разметку:
Обработка кликов на чекбоксах Title Check 1 Check 2 Check 3 Check 4 Check 5 Check 6 Check 7
Обычно в таких случая мы хотим иметь возможность выделять все записи одним кликом. Для этого в хедер таблицы добавлен чекбокс «Выделить все». Напишем простой обработчик кликов для него:
$('#select-all').on('click', function () < // находим все чекбоксы var $checkboxes = $('.chkbox'); // устанавливаем им свойство checked, такое же, как и чекбокса #select-all $checkboxes.prop('checked', $(this).prop('checked')); >);Теперь неплохо бы, чтоб после выделения всех чекбоксов и снятия выделения с одного, чекбокс #select-all также отображался без выделения. И в обратном случае: если все чекбоксы выделяются один за одним, то после выделения всех, чекбокс #select-all также выделялся. На словах сложно, на практике все просто:
$('.chkbox').on('click', function () < var $selectAll = $('#select-all'); // находим все чекбоксы var $checkboxes = $('.chkbox'); // находим все выделенные чекбоксы var $allChecked = $checkboxes.filter(':checked'); // сравниваем количество всех и выбранных чекбоксов // если равно - выделяем чекбокс #select-all // если нет - снимаем выделение с чекбокса #select-all $selectAll.prop('checked', $checkboxes.length === $allChecked.length); >);Теперь представьте, что у вас на странице десятки записей (да-да, обычно их меньше благодаря разбиению страницы), а выделить нужно всего 5 или 10, но не все. Выделять поштучно не слишком-то и удобно. И снимать выделение также не удобно. Неплохо бы, чтоб при нажатии Shift мы могли выделять несколько чекбоксов, указывая только начальный и конечный в интервале. Не забываем также, что при выделении через Shift всех чекбоксов, у нас должен выделяться чекбокс #select-all
+var lastChecked = null; -$('.chkbox').on('click', function () < +$('.chkbox').on('click', function (e) < var $selectAll = $('#select-all'); // находим все чекбоксы var $checkboxes = $('.chkbox'); + + // если это первый выделенный чекбокс, сохраняем его как последий выделенный + if (!lastChecked) < + lastChecked = this; + >+ + // проверяем, что клавиша Shift нажата + if (e.shiftKey) < + // находим начало и конец интервала + var start = $checkboxes.index(this); + var end = $checkboxes.index(lastChecked); + + // фильтруем все чекбоксы по интервалу выделения + $checkboxes.slice( + Math.min(start, end), + Math.max(start, end) + 1 + ) + // выделяем или снимаем выделение с интервала в зависимости + // от первого чекбокса в выделении + .prop('checked', lastChecked.checked) + >+ + // сохраняем последний выделенный чекбокс + lastChecked = this; // находим все выделенные чексбоксы var $allChecked = $checkboxes.filter(':checked'); // сравниваем количество всех и выбранных чекбоксов // если равно - выделяем чекбокс #select-all // если нет - снимаем выделение с чекбокса #select-all $selectAll.prop('checked', $checkboxes.length === $allChecked.length); >);Полный код обработчиков событий браузера:
Надеюсь, статья будет вам полезной. Если есть какие-то вопросы, пишите их в комментариях, не стесняйтесь 😉
2019-10-26 | 3494 | 3 3 |
как проверить checkbox js
Для того, чтобы проверить, выбран ли checkbox с помощью JavaScript, можно использовать свойство checked . Оно возвращает true , если checkbox выбран, и false , если не выбран.
type="checkbox" id="myCheckbox" /> onclick="checkCheckbox()">Check function checkCheckbox() const checkbox = document.getElementById('myCheckbox'); if (checkbox.checked) console.log('Checkbox is checked'); > else console.log('Checkbox is not checked'); > > В этом примере мы создали checkbox и кнопку, которая вызывает функцию checkCheckbox() . Функция получает элемент checkbox по его id и проверяет свойство checked . Если checked равно true , то мы выводим сообщение в консоль, что checkbox выбран. Если checked равно false , то мы выводим сообщение, что checkbox не выбран.
Как выделить или снять выделение сразу со всех чекбоксов сразу? [дубликат]
Как я могу выбрать или снять выделение сразу со всех чекбоксов, при этом чтобы, если у меня выбраны уже некоторые чекбоксы это работало корректно, то есть если у меня выбраны два бокса то при нажатии выделяются все без инверсии и наоборот? Пример кода: