Question

我一直在尝试根据用户在网页上检查了多少个复选框来更新结果。

如果用户已经检查了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)
    }
});

Answer 1

撤消你的if语句。＆GT;当你达到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)
    }
});

Answer 2

您需要为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);
    }
});

编辑：添加了一个jsfiddle并修复了一个错误 - 添加了一个else以在条件未满足时重置div。 JSFiddle：http://jsfiddle.net/148cL5rc/1/

在Checkbox值上运行函数？

2 个答案: