我正在尝试使用复选框进行过滤。但是我有一些问题。当我选择产品类别时,我得到了每个类别的项目,但当我取消所有选择时,没有任何产品。我想这样做,如果我取消选择类别项目,我想显示所有的产品,我怎么能做到这一点?帮帮我好吗?
<div class="tags">
<label>
<input type="checkbox" rel="arts" />
Arts
</label>
<label>
<input 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>
<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 () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
});
});
可以使用jsfiddle在线查看
http://jsfiddle.net/neon38/56MvQ/2/更新演示
使用 .length
获取选中复选框的长度。如果0显示所有li
if(!$('div.tags').find('input:checked').length){ //or .length == 0
$('.results > li').show();
}
试一下
$(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();
}
});
});
现场演示
also toggle('show')给它一个漂亮的效果
you Can just use Show() and hide() instead of toggle('show')
像这样放置条件 if($('div.tags').find('input:checked').length > 0)
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
if($('div.tags').find('input:checked').length > 0){
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
}
else{
$('.results > li').show();
}
});
});
工作小提琴试试这个
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
if( $('div.tags').find('input:checked').length > 0)
{
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
}else
{
$('.results > li').show();
}
});
});
你只需要检查是否有选项被选中
试试这个....
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
var count=0;
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
count=1;
});
if(count == 0)
{
$('.results > li').show();
}
});
});