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

How to deselect multiple checkboxes at once when another checkbox is clicked in Firefox?

本文关键字：复选框 一次 取消 选择 Firefox 单击 另一个      更新时间：2023-09-26

我在标题中提到了Firefox，因为我目前的实现在Chrome和IE中运行良好，但在Firefox中则不然。

目前，我在一个下拉菜单中有两组复选框，由两个不同的类标识，上过滤器和下过滤器。我想发生的是，当单击上层过滤器组中的复选框时，下层过滤器组中已选中的任何复选框都将被取消选中，反之亦然。

这是我目前在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();，它会一次取消选择所有3个框。此外，所有 JS 都在页面末尾加载，仅供参考。

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

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

你的代码说when some one clicks on the top, trigger the click event on the bottom (and vice versa). 所以现在发生的事情是有人点击顶部，然后你触发屁股的点击，这反过来又会触发顶部的点击，然后......你明白了。

很难说你想做什么，当点击不同的复选框时，我们看不到页面上发生了什么，但你需要利用click和change事件。

  1. 保留您当前拥有的逻辑，click顶部切换底部，反之亦然。

  2. 不是使用 （.click ） 触发 change 事件来触发单击事件。所以替换这个：

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

    有了这个：

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

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

相关文章：