Один checkbox включает другой checkbox

Рейтинг: 1Ответов: 1Опубликовано: 09.12.2014

Доброго времени суток. Есть форма: 

<input type="checkbox" id="qwerty">00  
<input type="checkbox">01  
<input type="checkbox">02  
<input type="checkbox">03

Задача: нужно, чтобы при нажатии чекбоксов 01-03 (всех или одиночно), чекбокс "00" включался. Если ничего не выбрано, то он должен выключаться.

А сейчас получается так, что при каждом нажатии на чекбоксы 01-03 чекбокс "00" поочередно включается-выключается.

Заранее благодарю за помощь.

html checkbox
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Потестировать можно тут.

<p><input type="checkbox" id="qwerty">00</p>
<input type="checkbox">01
<input type="checkbox">02
<input type="checkbox">03

JS

var chbx = document.querySelectorAll('input[type=checkbox]:not(#qwerty)');
qwerty.addEventListener('change', function(){
    var stat = this.checked;
    [].forEach.call(chbx, function(el){
        el.checked = stat;
    });
});

[].forEach.call(chbx, function(el){
    el.addEventListener('change',function(){
        var cnt = [].filter.call(chbx, function(el){
            return el.checked == true;
        }).length;
        qwerty.checked = cnt > 0;
    }, false);
});

UPD По вашему доп.вопросу - сгруппируйте чекбоксы. Можно по классам, но проще по "родителю". Смотрите такой вариант:

[].forEach.call(document.querySelectorAll('.block'), function (group) {
    var main = group.querySelector('.main'),
        chbx = group.querySelectorAll('input[type=checkbox]:not(.main)');
    main.addEventListener('change', function () {
        var stat = this.checked;
        [].forEach.call(chbx, function (el) {
            el.checked = stat;
        });
    });
    [].forEach.call(chbx, function (el) {
        el.addEventListener('change', function () {
            var cnt = [].filter.call(chbx, function (el) {
                return el.checked == true;
            }).length;
            main.checked = cnt > 0;
        }, false);
    });
});