Greetings Help please solve the problem. The checkbox with the class all_check , selects all checkboxes with the checkbox class at once. How to make it so that when you click in the sec_one section, checkboxes are selected only from this section (group), and not all at once on the page. The same with other sections (groups).

As a solution, it is to specify new classes for each section ( all_check + checkbox, all_check2 + checkbox2, all_check3 + checkbox3 ), but in this case you have to fence a lot of duplicate JS code with different classes only (there can be up to 15 sec_ # blocks on a page).

Is it possible to somehow use one JS code? So when he clicks on the all_check checkbox , he understands that it is necessary to select only checkboxes from his section (group)?

Thank.

<form method="POST" action=""> <div class="sec_one"> <label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label> <label><input class="checkbox" type="checkbox" name="a[]" value="1"> Место для курения</label> <label><input class="checkbox" type="checkbox" name="a[]" value="2"> Wi-Fi</label> <label><input class="checkbox" type="checkbox" name="a[]" value="3"> Детское меню</label> <label><input class="checkbox" type="checkbox" name="a[]" value="4"> Детское меню</label> </div> <div class="sec_two"> <label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label> <label><input class="checkbox" type="checkbox" name="b[]" value="1"> something 1</label> <label><input class="checkbox" type="checkbox" name="b[]" value="2"> something 2</label> <label><input class="checkbox" type="checkbox" name="b[]" value="3"> something 3</label> <label><input class="checkbox" type="checkbox" name="b[]" value="4"> something 4</label> </div> <div class="sec_three"> <label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label> <label><input class="checkbox" type="checkbox" name="c[]" value="1"> something 1</label> <label><input class="checkbox" type="checkbox" name="c[]" value="2"> something 2</label> <label><input class="checkbox" type="checkbox" name="c[]" value="3"> something 3</label> <label><input class="checkbox" type="checkbox" name="c[]" value="4"> something 4</label> </div> </form> <script> $(function () { var checkAll = $('input.all_check'); var checkboxes = $('input.checkbox'); checkAll.on('ifChecked ifUnchecked', function(event) { if (event.type == 'ifChecked') { checkboxes.iCheck('check'); } else { checkboxes.iCheck('uncheck'); } }); checkboxes.on('ifChanged', function(event){ if(checkboxes.filter(':checked').length == checkboxes.length) { checkAll.prop('checked', 'checked'); } else { checkAll.removeProp('checked'); } checkAll.iCheck('update'); }); }); </script>

    1 answer 1

    You can search for an ancestor and switch all boxes in its area:

     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); } 
     <form method="POST" action=""> <div class="sec_one"> <label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label> <label><input class="checkbox" type="checkbox" name="a[]" value="1"> Место для курения</label> <label><input class="checkbox" type="checkbox" name="a[]" value="2"> Wi-Fi</label> <label><input class="checkbox" type="checkbox" name="a[]" value="3"> Детское меню</label> <label><input class="checkbox" type="checkbox" name="a[]" value="4"> Детское меню</label> </div> <div class="sec_two"> <label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label> <label><input class="checkbox" type="checkbox" name="b[]" value="1"> something 1</label> <label><input class="checkbox" type="checkbox" name="b[]" value="2"> something 2</label> <label><input class="checkbox" type="checkbox" name="b[]" value="3"> something 3</label> <label><input class="checkbox" type="checkbox" name="b[]" value="4"> something 4</label> </div> <div class="sec_three"> <label><input class="all_check" type="checkbox" name="" value=""> Выбрать все</label> <label><input class="checkbox" type="checkbox" name="c[]" value="1"> something 1</label> <label><input class="checkbox" type="checkbox" name="c[]" value="2"> something 2</label> <label><input class="checkbox" type="checkbox" name="c[]" value="3"> something 3</label> <label><input class="checkbox" type="checkbox" name="c[]" value="4"> something 4</label> </div> </form>

    • Thanks a - kate