当我选择2个或更多复选框时,我的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();
}
});
});
这似乎可以满足您的需求:
$('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()
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句