Как отметить все чекбоксы
Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом javascript кода.
С помощью данного кода можно:
1. Отметить любое количество чекбоксов.
2. Отметить все чекбоксы щелкнув только по одному специальному чекбоксу.
3. Отметить и снять чекбоксы в один клик мыши.
Пример рабочего исходного кода и результат его работы также приведен приведен тут – http://jsfiddle.net/x404/8bhh9/
Использование:
Создать html код:
Добавить в форму чекбокс:
Прописать javascript-код перед закрывающимся тегом /head:
В итоге получится (демо с данным примером в начале статьи):
check/uncheck checbox Checkbox — «Выбрать все» по группам
Приветствую! Помогите пожалуйста решить задачу. Чекбокс с классом all_check, выбирает сразу все чекбоксы с классом checkbox. Как сделать так чтобы при клике в секции sec_one, выбирались чекбоксы только из этой секции (группы), а не все сразу на странице. Тоже самое и с другими секциями (группами). Как вариант решения это указать новые классы для каждой секции (all_check + checkbox, all_check2 + checkbox2, all_check3 + checkbox3), но в данном случае приходится городить кучу дублирующего JS кода только с разными классами (на странице может быть до 15 блоков sec_#). Можно ли как-то использовать один JS код. Чтобы при клике по чекбоксу all_check, он понимал что необходимо выбрать только чекбоксы из его секции (группы)? Спасибо.
Отслеживать
задан 9 июн 2017 в 12:31
117 1 1 золотой знак 1 1 серебряный знак 13 13 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Можно искать предка и переключать в его области все боксы:
Array.from(document.querySelectorAll('.all_check')).forEach(e => e.addEventListener('change', handler)); // Назначаем слушатель function handler(e) < // Выбираем все боксы из. дедушки и ставим их в нужное состояние Array.from(this.parentNode.parentNode.querySelectorAll('.checkbox')).forEach(e =>e.checked = this.checked); > Выбрать все флажки (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), которые постоянно нужно выбирать.
Курсы javascript
ругает 10 строку.
если есть готовый рабочий скрипт, буду признателен.
19.11.2015, 17:27
Регистрация: 14.01.2015
Сообщений: 12,990
var cheks = document.forms.domain.elements; for (var i = 0; i < cheks.length-2; i++) //если кроме чекбоксов с этими классами и двух кнопок в форме более ничего нет, //то и проверка класса и типа не нужна if (cheks[i].className == "toCheck" && cheks[i].type == "checkbox") .
Последний раз редактировалось laimas, 19.11.2015 в 17:35 .