當在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”事件，並相應地更新應用程序的該部分。