0

我在标题中提到了 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...

    });

Like I stated above, this works in Chrome and IE but in Firefox what happens is that when more than one checkbox is selected and you select a checkbox in the other group only one of the previously checked boxes get deselected.

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

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

4

1 回答 1

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)触发点击事件，而是触发change事件。所以替换这个：

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

    有了这个：

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

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

于 2013-10-15T20:16:07.607 回答