2

リンクでわかるように、「ALL GAMES」のチェックを外すと、必要なリストの結果を表示するチェックボックスがまだチェックされているにもかかわらず、すべての結果が非表示になります。

すべてのゲームのチェックボックスをオフにしたときに、すべての結果が削除されないようにしています。

デモはこちら

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>

ジャバスクリプト:

    $(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();
        }
    });
});
4

1 に答える 1