javascript - 使用 JQUERY 选择的 cb 列表的复选框过滤

Question

我正在使用 JQuery 对复选框进行筛选。我想把不同的 div 选中的复选框列表，当我点击删除类别的图标时，它会被删除选中的复选框列表和其他 div 区域的复选框列表。我该怎么做请帮忙？

喜欢这张图片:

您可以使用 JSDFiddle 进行查看 -> 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();
                }
            });
        });      

Answer 1

我想这就是你想要的，只要给它一点风格和 volla: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);
            }
        });
    });
});