如何取消選中一個jquery複選框並讓剩餘的複選框的結果仍然可用？

Question

正如您在鏈接中看到的那樣，當您取消選中「所有遊戲」時，即使仍然有複選框被選中並顯示必要的列表結果，所有結果都將隱藏。

我試圖避免在取消選中所有遊戲複選框時刪除所有結果。

DEMO HERE

的HTML：

<div id="left-col"> 
    <h1>Options</h1> 

    <div> 
     <input name="action-areas[]" id="areas_all" value="4" class="type_check" type="checkbox"> 
     <label for="areas_all">ALL GAMES</label> 
    </div> 
    <div> 
     <input name="action-areas[]" id="areas_2D" value="0" class="type_check" type="checkbox"> 
     <label for="areas_2D">2D</label> 
    </div> 
    <div> 
     <input name="action-areas[]" id="areas_3D" value="1" class="type_check" type="checkbox"> 
     <label for="areas_3D">3D</label> 
    </div> 
    <div> 
     <input name="action-areas[]" id="areas_mobile" value="2" class="type_check" type="checkbox"> 
     <label for="areas_mobile">Mobile</label> 
    </div> 
    <div> 
     <input name="action-areas[]" id="areas_multiplayer" value="3" class="type_check" type="checkbox"> 
     <label for="areas_multiplayer">Multiplayer</label> 
    </div> 
</div> 



<div id="right-col"> 
<h1>List items</h1> 
    <ul id="case-studies"> 
     <li class="type_hidden areas_all areas_2D">Super Mario Bros.</li> 
     <li class="type_hidden areas_all areas_3D">StarFox</li> 
     <li class="type_hidden areas_all areas_2D areas_mobile">Angry Birds</li> 
     <li class="type_hidden areas_all areas_multiplayer areas_3D">de_dust</li> 
     <li class="type_hidden areas_all areas_2D">Limbo</li> 
     <li class="type_hidden areas_all areas_2D areas_3D areas_mobile">Doom</li> 
    </ul> 
</div> 

的JavaScript：

$(document).ready(function(){ 
    $("input.type_check").attr("checked", "true").click(function() { 
     if($(this).is(':checked')) { 
      $("#case-studies li."+$(this).attr('id')).removeClass('type_hidden'); 
      $("#case-studies li").not(".type_hidden, .start_hidden").slideDown(); 
     } else { 
      $("#case-studies li."+$(this).attr('id')).addClass('type_hidden'); 
      $("#case-studies li."+$(this).attr('id')).slideUp(); 
     } 
    }); 

    $("input.start_check").attr("checked", "").click(function(){ 
     if($(this).is(':checked')) { 
      $("#case-studies li."+$(this).attr('id')).removeClass('start_hidden'); 
      $("#case-studies li").not(".type_hidden, .start_hidden").slideDown(); 
     } else { 
      $("#case-studies li."+$(this).attr('id')).addClass('start_hidden'); 
      $("#case-studies li."+$(this).attr('id')).slideUp(); 
     } 
    }); 
}); 

Answer 1

嘗試

$(document).ready(function(){ 

    var parts = $("input.type_check:not(#areas_all)"); 

    parts.click(function() { 
     if($(this).is(':checked')) { 
      $("#case-studies li." + this.id).removeClass('type_hidden').slideDown(); 
     } else { 
      var cls = parts.filter(':checked').map(function(){ 
       return '.' + this.id; 
      }).get(); 
      $("#case-studies li").not(cls.join(',')).addClass('type_hidden').slideUp();; 
     } 
    }); 

    $('#areas_all').click(function(){ 
     parts.prop('checked', this.checked).each(function(){ 
      $(this).triggerHandler('click') 
     }) 
    }).prop('checked', true).triggerHandler('click') 

}); 

演示：Fiddle