Javascript 是否对复选框值运行函数？

我一直在尝试根据用户在页面上选中的复选框数量来更新结果

如果用户已选中5个或更多，则应淡出2个div

如果用户已选中10个或更多，则应再淡出两个div

如果用户选择10个或更多，则应淡出另一组

我可以运行第一个函数，但我相信，由于第一个if语句已经完成，它没有寻找更新/值更改？其他的也不会褪色回100%的不透明度

$('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;
    if (boxChecked > 5) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    }
    else if (boxChecked > 10) {
        $('.div-1, .div-3').fadeTo(500, 0.4)
    }
    else if (boxChecked > 11) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    }
});

---

反转您的if语句。>当你超过5的时候，5永远是真的，所以你要开始用更高的数字检查，然后用你的方法去降低数字

$('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;
    if (boxChecked > 11) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    } else if (boxChecked > 10) {
        $('.div-1, .div-3').fadeTo(500, 0.4)
    } else if (boxChecked > 5) {
        $('.div-1, .div-2').fadeTo(500, 0.4)
    }
});

---

您需要为if/else语句条件设置范围，或者只使用if语句使代码正常运行

例如，如果长度>5，将采用第一个分支

但是，您的第二个分支检查长度是否大于10，但不会到达此语句，因为第一个条件也是真的

您可以尝试以下方法：

   $('input:checkbox').change(function() {
    var boxChecked = $('input:checkbox:checked').length;
    if (boxChecked === 2) {
        $('.div-1, .div-2').fadeTo(500, 0.4);
    }
    else if (boxChecked > 3 && boxChecked <5) {
        $('.div-1, .div-3').fadeTo(500, 0.4);
    }
    else if (boxChecked > 4) {
        $('.div-1, .div-2').fadeTo(500, 0.4);
    }
    else {
        $('.div-1, .div-2, .div-3').fadeTo(500,1);
    }
});

$（'input:checkbox'）。更改（函数（）{
var-boxChecked=$（'input:checkbox:checked'）。长度；
如果（复选框===2）{
美元(1,2).法德托(500,0.4);；
}
否则如果（选中框>3和选中框4）{
美元(1,2).法德托(500,0.4);；
}
否则{
美元("第一分区,第二分区,第三分区").法德托(500,1);；
}
});

编辑：添加了一个JSFIDLE并修复了一个bug-添加了一个else以在不满足条件时重置DIV。

---

jsiddle:

div应该是累积衰减的，还是仅在满足最大条件时才衰减？分别在第二和第三个

fadeTo

语句中的

div-3

和

div-2

都缺少

类选择器。这是有意的吗？另外，您希望对所有ifs使用

boxChecked>=5

样式，因为您说过“如果用户已选中5个或更多”

boxChecked>5

表示除非用户选中了6个或更多框，否则代码将不会运行。抱歉，已更新类选择器。不确定它们为什么会丢失，但在我的js文件中有。@AoiHana 5和11都大于10，当11被选中时会发生什么？1号、2号和3号分区是否应该淡出？或者只是感谢你抽出时间。这对我帮助很大。我现在更了解如何设置这些。