Question

我正在尝试在jquery中创建一个带有多个复选框的过滤器但不起作用。

我有4个复选框（电路板类型），酒店列表在我的网站上显示为<article></article>。

我想创建一个过滤器，当勾选一个框以隐藏与未选中框对应的文章时。

Answer 1

您有一些结构性HTML问题（输入是自动关闭的，而您的articles未关闭）。修复后，您可以循环浏览其中的每一个，并通过拉出article来显示和隐藏相应的value：

$('input[type=checkbox]').click(function(e){
    $("input[type=checkbox]").each(function(){
       var grabVal = $(this).val();
       if(!$(this).is(":checked")){
           $("article[data-board='"+grabVal+"']").hide(); //show article that was clicked
        }else{
           $("article[data-board='"+grabVal+"']").show(); //hide article that was clicked
        }
    });

    if(!$("input[type=checkbox]").is(":checked")){
     $("article").show(); //show all if no checkboxs clicked
    }

});

FIDDLE

Answer 2

<强> HTML

<input type="checkbox" class="trigger" id="ALL" name="ALL" value="all">Toate</input>
<input type="checkbox" class="trigger" id="RO" name="RO" value="room">Room Only</input>
<input type="checkbox" class="trigger" id="BB" name="BB" value="breakfast">Breakfast Buffet</input>
<input type="checkbox" class="trigger" id="AI" name="AI" value="allinclusive">All Inclusive</input>
<input type="checkbox" class="trigger" id="AI" name="AI" value="halfboard">Half Board</input>

<article data-board="room">
    <p>Room Only</p>
</article>
<article data-board="breakfast">
    <p>Breakfast Buffet</p>
</article>
    <article data-board="allinclusive">
    <p>All Inclusive</p>
</article>
    <article data-board="allinclusive">
    <p>All Inclusive</p>
</article>
    <article data-board="halfboard">
    <p>Half Board</p>
</article>
    <article data-board="halfboard">
    <p>Half Boardy</p>
</article>

<强>的javascript

   $('article').hide();
$('.trigger').removeClass('checked');
$('.trigger').on('touchstart click',function(){
        var self = $(this);
        if(self.prop('id')=='ALL') {
            if(self.hasClass('checked')){
                $('article').hide(); 
                self.removeClass('checked');
            } else {
            self.addClass('checked');
        $('article').show(); 
            }
        } else {
          if(self.hasClass('checked')){
                $('article[data-board="' + self.val() + '"]').hide(); 
                self.removeClass('checked');
            } else {
            self.addClass('checked');
        $('article[data-board="' + self.val() + '"]').show(); 
            }
        }
    });

<强>拨弄 http://jsfiddle.net/qvmskejq/6/

选择一个或多个选项时筛选div jquery

2 个答案: