当在Firefox中单击另一个复选框时，如何一次取消选择多个复选框？

Question

我在标题中提到了Firefox，因为我当前的实现可以在Chrome和IE中完美运行，但不能在Firefox中运行。

目前，我在一个下拉菜单中有两组复选框，由两个不同的类（upperFilter和lowerFilter）标识。 我想发生的是，当单击upperFilter组中的复选框时，取消选择LowerFilter组中已经选择的所有复选框，反之亦然。

这是我目前在javascript中处理此问题的方式：

$("INPUT:checkbox").click(function () {

        if ($(this).hasClass("upperFilter") && $('INPUT:checked').filter('.lowerFilter').length > 0) {
            $('INPUT:checked').filter('.lowerFilter').click();
        } else if ($(this).hasClass("lowerFilter") && $('INPUT:checked').filter('.upperFilter').length > 0) {
            $('INPUT:checked').filter('.upperFilter').click();
        }

        // other stuff...

    });

就像我在上面提到的那样，这在Chrome和IE中有效，但是在Firefox中，发生的情况是，当选中多个复选框并且您在另一组中选择了一个复选框时，只有先前选中的一个复选框被取消了。

奇怪的是，我可以从upperFilter中选择3个框，然后打开Firebug控制台并键入$('INPUT:checked').filter('.upperFilter').click(); 并立即取消选择所有三个。 另外，所有JS都在页面末尾加载，仅供参考。

我不知道为什么它会在控制台而不是页面内工作。

Answer 1

使用.click不是正确的方法。 原因如下：

您的代码说， when some one clicks on the top, trigger the click event on the bottom (and vice versa) 。 因此，现在发生的事情是有人单击顶部，然后触发了对按钮的单击，而按钮又触发了对顶部的单击，然后……您就明白了。

很难说出您要执行的操作，并且由于单击了不同的复选框，我们看不到页面上会发生什么，但是您需要同时利用click和change事件。

1. 保持您当前具有的逻辑，在顶部click可切换底部，反之亦然。

2. 而不是使用（ .click ）触发click事件，而是触发change事件。 因此，替换为：

    $('INPUT:checked').filter('.lowerFilter').click(); 

   有了这个：

    $('INPUT:checked').filter('.lowerFilter').prop('checked', false).trigger('change'); 

3. 然后，在应用程序的其他位置，您需要侦听复选框上的“ change”事件，并相应地更新应用程序的该部分。