Как выбрать сразу несколько чекбоксов протяжкой js
Перейти к содержимому

Как выбрать сразу несколько чекбоксов протяжкой js

  • автор:

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), которые постоянно нужно выбирать.

Как выбрать несколько checkbox на странице

Author24 — интернет-сервис помощи студентам

Здравствуйте, уважаемые знатоки. В своей работе столкнулся с сайтом, на котором нужно настраивать расписание. Редактировать выбором checkbox соответствующим часам, которые нужны.
Например чтобы поставить расписание с 14:00 до 17:00 нужно нажать мышью на 3 checkboxа, и подтвердить это дело. С ростом количества часов это занятие превращается в монотонное выставление галочек.
Вопрос:
Подскажите, можно ли с помощью JS реализовать нажатие(активацию) нескольких checkbox на странице?. Спасибо

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Выбрать один или несколько CheckBox одновременно и по кнопке запустить определенные батники
есть 5 CheckBox’ов. 1 — запустить 1 батник 2 — запустить 2 батник 3 — запустить 3 батник 4 -.

Как поставить галочку в CheckBox на интернет-странице?
Суть проблемы вот в чём При создании программы авторегера на сайте присутствует компонент checkbox.

Выбрать все checkbox при нажатие на главном checkbox
Не могу никак реализовать, допустим как это сделано на почтах или как mail.ru. При выборе главного.

Как заблокировать несколько checkbox?
Доброго времени суток! Как заблокировать несколько checkbox,например их всего 5,допустим если.

Как отметить все чекбоксы

Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом javascript кода.

С помощью данного кода можно:

1. Отметить любое количество чекбоксов.

2. Отметить все чекбоксы щелкнув только по одному специальному чекбоксу.

3. Отметить и снять чекбоксы в один клик мыши.

Пример рабочего исходного кода и результат его работы также приведен приведен тут – http://jsfiddle.net/x404/8bhh9/

Использование:

Создать html код:

Добавить в форму чекбокс:

Прописать javascript-код перед закрывающимся тегом /head:

  

В итоге получится (демо с данным примером в начале статьи):

    check/uncheck checbox    
Выбор/снятие всех чекбоксов



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *