javascript - 如何取消选中 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