有多个选择的jQuery复选框选择

当我在2个或多个复选框上选择时，遇到与我的jQuery复选框选择有关的问题。我对前端编程还是一个新的东西，请耐心等待。有多个选择的jQuery复选框选择

1）当我选择的第一个复选框和一个额外的第二个复选框它给所有不包括第二选择的选择的：在一个复选框

选择/取消的伟大工程，但是选择多个选择时的问题所在。

2）当我第一个复选框取消选择第二个复选框仍然检查它给我所有的选择。

看来我必须选择两个盒子才能正确注册并给我正确的过滤选择。

代码在这里： JSFiddle

HTML

<div class="tags"> 
<label> 
    <input type="checkbox" rel="accounting" />Accounting</label> 
<label> 
    <input type="checkbox" rel="courier" />Courier</label> 
<label> 
    <input type="checkbox" rel="project-management" />Project Management</label> 
<label> 
    <input type="checkbox" rel="video-games" />Video Games</label> 
</div> 
<ul class="results"> 
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a></li> 
<li class="courier" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Courier</a></li> 
<li class="project-management" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Project Management</a></li> 
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a></li> 
</ul>

jQuery的

$(document).ready(function() { 
$('div.tags').find('input:checkbox').live('click', function() { 
    if ($(this).prop("checked")) { 
     $('.results > li').toggle('show'); 
     $('div.tags').find('input:checked').each(function() { 
      $('.results > li.' + $(this).attr('rel')).toggle('show'); 
     }); 
    } else{ 
     $('.results > li').show(); 
    } 
}); 
});

来源

2014-12-28 Kincsem

这是你以后http://jsfiddle.net/j08691/too8joj7/？ – j08691

几乎，你可以改变它，如果没有选择任何东西，整个列表显示出来而不是什么？并选择每个提出这些选择等。 – Kincsem

因此，像http://jsfiddle.net/j08691/L9rtnswm/？ – j08691

这似乎是你所需要的：

$('div.tags').find('input:checkbox').on('click', function() { 
    var vals = $('input:checkbox:checked').map(function() { 
     return $(this).attr('rel'); 
    }).get(); 
    $('li').hide().filter(function() { 
     return ($.inArray($(this).attr('class'), vals) > -1) 
    }).show() 
    if ($('input:checkbox:checked').length == 0) $('li').show() 
});

jsFiddle example

来源

2014-12-28 04:07:30 j08691

有多个选择的jQuery复选框选择

回答

相关问题