Нестандартные флажки - проблема с моей логикой JavaScript (ветвь else не попадает)

Question

Я создаю несколько пользовательских «флажков», и под этим я подразумеваю, что я просто стилизую элементы ярлыка и буду размещать флажок за пределами экрана.Это дизайн / функциональность, которая пришла, поэтому я решил попробовать с использованием семантических флажков.

Что я хочу, это когда вы нажимаете один из этих пользовательских флажков (вы действительно запускаетестилизованная метка), «флажок» должен изменить цвет, а фоновый div за всеми «флажками» также должен «загореться».У меня все это работает.

Когда вы снимите флажки «флажки», этот «флажок» не будет выделен, но вы все равно должны получить цвет фона div, пока у вас есть любые «флажки»проверено.Когда вы снимите этот последний «флажок», он должен отключить и , чтобы отключить этот цвет фона div. Вот где у меня проблемы .

Лучше всего проиллюстрировать на примере!

http://jsfiddle.net/xS2JU/

У меня есть операторы console.logи если вы посмотрите их, вы увидите, что я не выполняю эту третью ветку, когда вы отключите последний флажок.Я просто отслеживаю проверенное состояние и использую простой счетчик, чтобы отслеживать, сколько «флажков» отмечено.У кого-нибудь есть идеи?

Answer 1

Демо-версия

Так как это только делает это, onchange count всегда будет в LEAST 1, поэтому он никогда не был в 0, поэтому 3-я ветвь никогда не вызывалась. Или лучшее объяснение: если кто-то не проверял его, HAD , который нужно проверить раньше, счет начинается с 1 при последнем вызове. Я только что перенес ваше состояние во 2-е условие, потому что здесь вы снимаете галочку, и в этот момент вы видите, что все они сняты.

$(function() {
    var $help_choices    = $('#help_choices'),
        count            = 0;

        console.log(count);

    $('input:checkbox', $help_choices).change(function() {
        var checked    = this.checked,
            $label    = $(this).parent();
        if (checked) { //additive checkboxes, check one or multiples
            $help_choices.addClass('help_choices_selected');
            $label.addClass('help_label_selected');
            count++;
            console.log(checked + '  ' + count);
        } else { //subtractive checkboxes, uncheck one or multiples
            count--;
            $label.removeClass('help_label_selected');

           // Put the final check here 
           if(count === 0){
                 $help_choices.removeClass('help_choices_selected');
                $label.removeClass('help_label_selected');
                console.log(checked + '  ' + count + ' 3rd branch');
            }
        }
    });

});

Кроме того, здесь есть немного более короткий код, в котором вам не нужно отслеживать счет, который можно оптимизировать дальше, но в основном я просто проверяю, проверяются ли какие-либо входные данные внутри родительского элемента, получая длину input:checked на #help_choices element.

Демо 2

$(function() {
    var $help_choices    = $('#help_choices');        

    $('input:checkbox', $help_choices).change(function() {
        var checked    = this.checked,
            $label    = $(this).parent();

        if (checked) { //additive checkboxes, check one or multiples
            $help_choices.addClass('help_choices_selected');
            $label.addClass('help_label_selected');
        } else{ //subtractive checkboxes, uncheck one or multiples
            $label.removeClass('help_label_selected');

            if($('#help_choices input:checked').length === 0){
                $help_choices.removeClass('help_choices_selected');
            }
        }
    });
});

Answer 2

Вместо увеличения и уменьшения переменной count в условиях if / else.Сделайте это первым делом в обработчике событий change.Это делает вашу логику очень простой.

if(checked)
    count++;
else
    count--;

Работа демо

Answer 3

Проблема в том, что когда установлен ровно один флажок и вы сняли его, он пойдет по второй ветви, потому что count > 0 (пока вы не уменьшите его внутри этой ветви), и, таким образом, вы никогда не войдете в последнюю ветку,Кроме того, вам не нужно тестировать count >=0 в первом случае if, потому что (как только вы получите работающий код) count всегда будет >=0.

Удалите else из третьей ветви и просто сделайте его if внутри второй ветви.

if (checked) { //additive checkboxes, check one or multiples
  $help_choices.addClass('help_choices_selected');
  $label.addClass('help_label_selected');
  count++;
} else if (!checked && count > 0) { //subtractive checkboxes, uncheck one or multiples
  count--;
  $label.removeClass('help_label_selected');
  if (count == 0)  { //now no checkboxes selected
    $help_choices.removeClass('help_choices_selected');
  }
}