Checkbox - “Выбрать все” по группам

205
10 июня 2017, 16:53

Приветствую! Помогите пожалуйста решить задачу. Чекбокс с классом all_check, выбирает сразу все чекбоксы с классом checkbox. Как сделать так чтобы при клике в секции sec_one, выбирались чекбоксы только из этой секции (группы), а не все сразу на странице. Тоже самое и с другими секциями (группами).

Как вариант решения это указать новые классы для каждой секции (all_check + checkbox, all_check2 + checkbox2, all_check3 + checkbox3), но в данном случае приходится городить кучу дублирующего JS кода только с разными классами (на странице может быть до 15 блоков sec_#).

Можно ли как-то использовать один JS код. Чтобы при клике по чекбоксу all_check, он понимал что необходимо выбрать только чекбоксы из его секции (группы)?

Спасибо.

<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>
Answer 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); 
}
<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>

READ ALSO
Github pages и localStorage

Github pages и localStorage

Собственно, вопросЕсли я размещу сайт на гитхаб пейджес, будет ли работать локальное хранилище, задаваемое через интерфейс Window

199
Как сделать вывод abbrNum такого вида?

Как сделать вывод abbrNum такого вида?

Необходимо из вида цены 96 000 000 рубполучить слуховой читаемый вид, то есть так:

160