自定义样式的复选框-我的JavaScript逻辑问题(一个else分支没有被击中)

Custom styled checkboxes - problem with my JavaScript logic (an else branch is not getting hit)

本文关键字：分支 else 一个 问题 复选框 样式 我的 JavaScript 自定义      更新时间：2023-09-26

我正在创建一些自定义的"复选框"，我的意思是，我只是对标签元素进行样式化，并将复选框定位在屏幕之外。这是进来的设计/功能，所以我想我应该尝试使用语义复选框。

我想要的是当你点击其中一个自定义的"复选框"(你真的触发了风格化的标签)，"复选框"应该改变颜色，所有"复选框"后面的背景div也应该"亮起来"。这些都可以用了

当你取消选中"复选框"，"复选框"将不突出显示，但你仍然应该得到背景div颜色，而你有任何"复选框"选中。当你取消选中最后的"复选框"时，它应该取消和的高亮显示，并关闭背景div颜色。这就是我遇到问题的地方。

最好用一个例子来说明!

http://jsfiddle.net/xS2JU/

我有console.log语句，如果你观察它们，你会发现当你关闭最后一个复选框时，我没有执行第三个分支。我只是跟踪复选状态，并使用一个简单的计数器来跟踪有多少"复选框"被选中。有人有什么想法吗?

现场演示

由于这只是这样做，onchange计数将始终在LEAST 1，所以它永远不会在0，因此永远不会调用第三个分支。或者更好的解释是，如果一个未选中，则必须先检查，使计数在最后一次调用时从1开始。我只是把你的条件移到了第二个条件里面，因为这是你取消勾选的地方，这时你会看到它们是否都是未选中的。

$(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');
            }
        }
    });
});

这里还有一个更短的代码，你不需要跟踪计数，可以进一步优化，但基本上我只是检查是否有任何输入在父元素中被检查，通过获得#help_choices元素上input:checked的长度。

演示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');
            }
        }
    });
});

问题是，当恰好有一个复选框被选中并且您取消选中它时，它将进入第二个分支，因为count > 0(直到您在该分支内减少它)，因此您永远不会进入最后一个分支。此外，您并不需要在第一个if中测试count >=0，因为(一旦代码工作)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');
  }
}

代替在if/else条件中对count变量进行递增和递减操作。将其作为change事件处理程序中的第一件事。它使你的逻辑非常简单。

if(checked)
    count++;
else
    count--;
演示工作

相关文章：