使用 jQuery 的复选框过滤器答案

【问题标题】：Checkboxes filter using jQuery使用 jQuery 的复选框过滤器
【发布时间】：2014-11-18 08:58:51
【问题描述】：

我正在尝试让下面的代码工作，但是我的 jQuery 技能太基础了，我找不到问题

此代码旨在根据复选框数组过滤列表

代码很可能没有错误

问题肯定来自一些愚蠢的事情，比如没有正确声明、没有在正确的条件下测试或没有调用所需的脚本

谢谢一百万！

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#options input.type_check").click(function() {
        if($(this).is(':checked')) {
            $("#events li."+$(this).attr('id')).removeClass('type_hidden');
            if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) {
                $("#events li).not(".type_hidden, .start_hidden").slideDown();
            }
        } else {
            $("#events li."+$(this).attr('id')).addClass('type_hidden');
            $("#events li."+$(this).attr('id')).slideUp();
        }
        return false;
    });

    $("#options input.start_check").click(function() {
        if($(this).is(':checked')) {
            $("#events li."+$(this).attr('id')).removeClass('start_hidden');
            if(!$("#events li."+$(this).attr('id')).hasClass('type_hidden')) {
                $("#events li).not(".type_hidden, .start_hidden").slideDown();    
            }
        } else {
            $("#events li."+$(this).attr('id')).addClass('start_hidden');
            $("#events li."+$(this).attr('id')).slideUp();
        }
        return false;
    });
});
</script>
</head>
<body>
<p>Types:</p>
<div><input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /><label for="type_0">Type 0</label></div>
<div><input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /><label for="type_1">Type 1</label></div>
<div><input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /><label for="type_2">Type 2</label></div>
<div><input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /><label for="type_3">Type 3</label></div>
<div><input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /><label for="type_4">Type 4</label></div>

<p>Starts:</p>
<div><input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /><label for="type_072009">July 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /><label for="type_082009">August 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /><label for="type_092009">September 2009</label></div>
<div><input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /><label for="type_102009">October 2009</label></div>

<p>Events</p>
<ul id="events">
    <li id="a1768" class="type_0 start_072009">Event 1</li>
    <li id="a2190" class="type_1 start_072009">Event 2</li>
    <li id="a2191" class="type_2 start_072009">Event 3</li>
    <li id="a1864" class="type_2 start_082009">Event 4</li>
    <li id="a1679" class="type_3 start_082009">Event 5</li>
    <li id="a2042" class="type_0 start_092009">Event 6</li>
    <li id="a1717" class="type_4 start_092009">Event 7</li>
    <li id="a1917" class="type_4 start_092009">Event 8</li>
    <li id="a1767" class="type_4 start_092009">Event 9</li>
    <li id="a1866" class="type_2 start_102009">Event 10</li>
</ul>

</body>
</html>

【问题讨论】：

标签： jquery filter checkbox

【解决方案1】：

在你的代码中有这一行

  $("#events li).not(".t.........

改变它：

   $("#events li").not(".t

【讨论】：

他们是有这个问题的 2 行，可能来自复制/粘贴
感谢 Alon。我编辑了这两行。不幸的是，问题仍然存在。

【解决方案2】：

您是否需要一些东西来过滤结果取决于复选框
看看
http://jsfiddle.net/ag263ms9/

HTML

<div class="tags">
  <label><input id="ss" type="checkbox" rel="arts" /> Arts </label><label>
  <input id="aa" type="checkbox" rel="computers" /> Computers </label><label>
  <input type="checkbox" rel="health" /> Health </label><label>
  <input type="checkbox" rel="video-games" /> Video Games </label>
</div>
<p></p>
<p></p>
<hr />
<div id="sso">
  Click to uncheck #Computers</div>
<p></p>
<p></p>
<hr />
<ul class="results">
  <li class="arts computers">Result 1 </li>
  <li class="video-games">Result 2 </li>
  <li class="computers health video-games">Result 3 </li>
  <li class="arts video-games">Result 4 </li>
</ul>

jQuery

    $(document).ready(function () {

    $(':checkbox').click(function () {
        if ($(':checkbox:checked').length > 3) {
            alert('you can not check more than 3 checkboxes');
            $(this).prop('checked', false);
        }
    });
}) $('div.tags').delegate('input[type=checkbox]', 'change', function () {
    var $lis = $('.results > li'),
    $checked = $('input:checked');

    if ($checked.length) {
        var selector = $checked.map(function () {
                return '.' + $(this).attr('rel');
            }).get().join('');
        var $results = $lis.hide().filter(selector);

        if ($results.length > 0) {
            $('.no-results-found').remove();
            $results.show();
        } else {
            $('.results').append('<li class="no-results-found">No results found.</li>');
        }
    } else {
        $lis.show();
    }

    //click to uncheck

    $('#sso').on('click', function (ev) {
        $("#aa").prop("checked", false);
        var $results = $lis.show().filter(selector);
    });

});

【讨论】：