我的jquery複選框錯誤

Question

我找不出解決這個錯誤的好方法。如果我取消選中方塊，取消選中紅色，然後重新檢查紅色，紅色方塊會恢復。當用戶取消選中並檢查顏色時，如何確保不再添加任何未經檢查的形狀？

我真正的工作例子有更多的複選框和100多倍的數據。 JSFiddle清楚地顯示了這個錯誤。

謝謝！

http://jsfiddle.net/h3AbN/

Answer 1

這是一個驅動我的瘋狂。這似乎是一個直截了當的問題，但我不能提出一個超級簡單的解決方案。無論如何，請看看它是否適合你。我認爲它比現在的代碼簡單，但乍一看你可能並不這麼認爲。它具有能夠支持多個屬性的附加好處。例如，如果您添加了第三個篩選器項目，如hasBorder，那麼它將繼續工作。複選框

1. 監視器改變事件
2. 如果複選框未被選中，然後就隱藏具有該類
3. 如果複選框被選中，那麼我們需要開始展示的東西應有盡有。
4. 獲取所有擁有此類的列表項
5. 篩選出未勾選複選框的任何列表項。

http://jsfiddle.net/mgaRw/10/

$('input').change(function() { 
    var value = $(this).val(); 
    //checkbox is checked 
    if ($(this).is(':checked')) { 
     var targets = $('.filterThis li') 
      //filter on class 
      .filter(function() { 
       if ($(this).hasClass(value)) return true; 
      }) 
      //filter on other checkbox states 
      .filter(function() { 
       var classList = $(this).attr('class').split(/\s+/); 
       var index = classList.indexOf(value);    
       if (index !== -1) { 
        classList.splice(index, 1); 
       } 
       var include = true; 
       $.each(classList, function(index, item){ 
        if ($('input[value="'+item+'"]').not(':checked').length) { 
         include = false; 
         return false; 
        } 
       }); 

       return include; 
     }); 

     //show list items 
     targets.show(); 
    } 
    else {   
     //hide list items 
     $('.filterThis li').filter(function() { 
      if ($(this).hasClass(value)) return true; 
     }).hide(); 
    } 
}); 

Answer 2

找到它了。正是有了這條線：

$.each($tmp, function(i, val4) { 
    if ($this.is(":checked")) { // problem is here 
     if ($('.' + val4 + '').is(":visible") == true) { 

更改這個

$.each($tmp, function(i, val4) { 
    if ($(this).is(":checked")) { // problem is here 
     if ($('.' + val4 + '').is(":visible") == true) { 

更新：爲什麼呢？

你很困惑$ this和$（this）。您可以在函數中儘早定義$，並指向用戶單擊的複選框。但是，在你的$ .each函數中，你想檢查checkArray中的複選框是否被選中。爲此，您應該在checkArray中引用該項目，而不是單擊的複選框。

Answer 3

想我給它一個去，我來到了這裏的新版本的工作原理：http://jsfiddle.net/kwBTg/1/。