我正在使用JQuery对复选框进行过滤。我想把不同的div选中复选框列表,当我点击删除类别的图标时,它将被删除选中的复选框列表和其他div区域的复选框列表。我该怎么办请帮帮忙?
喜欢此图片:
你可以使用JSDFiddle进行viev - >的 http://jsfiddle.net/XRJ2d/
HTML:
<div style="background-color:#ccc; width:90%; height:30px;">
Selected checkbox Filter list ->
<br>
<img src="http://i.stack.imgur.com/5iWr1.jpg"/>
<br><br><br><br>
<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>
Javascript:
$(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();
}
});
});
答案 0 :(得分:2)
我认为这就是你想要的,只要给它一点风格和卷:http://jsfiddle.net/XRJ2d/4/
$(document).ready(function () {
$('div.tags').find('input:checkbox').on('click', function () {
$('.results > li').hide();
$('#tags').html('<div id="selectedTags">Selected Tags : </div>');
if( $('div.tags').find('input:checked').length > 0)
{
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
$('#tags').append('<span class="tagDiv">'+$(this).attr('rel').toUpperCase()+'<span class="delete">x</span></span>');
});
}else{
$('.results > li').show();
}
});
$(document).on('click','.delete',function(){
var tagName=$(this).parent().text();
tagName=tagName.slice(0,-1).toLowerCase();
$('input').each(function(){
if($(this).attr('rel')==tagName){
$(this).trigger('click');
$(this).trigger('click');
$(this).attr('checked',false);
}
});
});
});