1

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

<input type="checkbox" id="qwerty">00  
<input type="checkbox" onclick="(el = document.getElementById('qwerty')).checked = !el.checked">01  
<input type="checkbox" onclick="(el = document.getElementById('qwerty')).checked = !el.checked">02  
<input type="checkbox" onclick="(el = document.getElementById('qwerty')).checked = !el.checked">03

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

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

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

1
  • @alegraft, дополнил в ответе
    – Deonis
    Commented 10 дек. 2014 в 11:29

1 ответ 1

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);
    });
});
1
  • @alegraft, Старайтесь либо дополнять существующий вопрос или задавать новый вместо создания подвопросов в комментариях. Commented 10 дек. 2014 в 6:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.