Question

问题是这里的代码很好，因为它的主要功能是如果选中一个复选框并且它有效，则缩小无序列表的结果，但是如果没有选中复选框，你可以看到所有的结果。如果没有选中任何复选框，我想隐藏结果。你能帮帮我吗？

代码：

$(document).ready(function() {
    $("[name='filter']").change(function() {
        $('.filtered li').show();
        $("[name='filter']:checked").each(function() {
            var tag = $(this).val();
            $('.filtered li').children(".tags:not(:contains('" + tag + "'))").parent().hide();
        });
    });
});

HTML：

        <input id="filter1" name="filter" size="40"/ type='checkbox' value=filter1>filter1
        <input id="filter2" name="filter" size="40"/ type='checkbox' value=filter2>filter2
        <input id="filter3" name="filter" size="40"/ type='checkbox' value=filter3>filter3</br>


        <input id="filter4" name="filter" size="40"/ type='checkbox' value=filter4>filter4
        <input id="filter5" name="filter" size="40"/ type='checkbox' value=filter5>filter5
        <input id="filter6" name="filter" size="40"/ type='checkbox' value=filter6>filter6
        <input id="filter7" name="filter" size="40"/ type='checkbox' value=filter7>filter7
        <input id="filter8" name="filter" size="40"/ type='checkbox' value=filter8>filter8
        <input id="filter9" name="filter" size="40"/ type='checkbox' value=filter9>filter9</br>


        <input id="filter10" name="filter" size="40"/ type='checkbox' value=filter10>filter10
        <input id="filter11" name="filter" size="40"/ type='checkbox' value=filter11>filter11
        <input id="filter12" name="filter" size="40"/ type='checkbox' value=filter12>filter12</br>


        <input id="filter13" name="filter" size="40"/ type='checkbox' value=filter13>filter13
        <input id="filter14" name="filter" size="40"/ type='checkbox' value=filter14>filter14
        <input id="filter15" name="filter" size="40"/ type='checkbox' value=filter15>filter15
        <input id="filter16" name="filter" size="40"/ type='checkbox' value=filter16>filter16
        <input id="filter17" name="filter" size="40"/ type='checkbox' value=filter17>filter17</br>


        <input id="filter18" name="filter" size="40"/ type='checkbox' value=filter18>filter18
        <input id="filter19" name="filter" size="40"/ type='checkbox' value=filter19>filter19
        <input id="filter20" name="filter" size="40"/ type='checkbox' value=filter20>filter20</br>

<br><br>
<div id="HELP" class="filtered">

<ul>
    <li>1
        <span class="tags">filter1 filter5 filter7 filter9</span>      
    </li>

    <li>2
        <span class="tags">filter2 filter15 filter17 filter19</span>      
    </li>
</ul>

</div>

Answer 1

只需$('.filtered li').hide();代替$('.filtered li').show();，也可以在change事件之外执行此操作

Answer 2

// change event
$('input[type="checkbox"]').change(function() {
    // if we dont (!) have even 1 checkbox 'checked'
    if(!$('input[type="checkbox"]:checked').length) {
        $("li").hide();
    } else {
        $("li").show();
    }
});

演示：http://jsfiddle.net/e5L37/1/

如果未选中复选框，则隐藏无序列表

2 个答案: