Javascript 多重复选框过滤器：如何同时获得加法和减法效果

我想创建复选框，根据div项所属的类来隐藏和显示它们。过滤器分为两类：城市和成本

• 选中每个类别中的两个复选框时，应添加一个附加项 影响（即，如果我选中“Hamilton”和“Toronto”，则所有 元素应显示）
• 在两个复选框之间选中两个复选框 类别应具有减法效果（即，如果我选中 “多伦多”和“廉价食品”，我应该只看到一篇博文）

我现在的代码在选中一个复选框时有效，但在选中两个复选框时无效 i、 e.如果我勾选“多伦多”和“廉价食品”，那么“汉密尔顿”和“多伦多”的结果都是“廉价食品”。 i、 e.如果我选择“汉密尔顿”和“多伦多”，则只会出现“汉密尔顿”结果

我对JS和编程都是新手，所以非常感谢您的帮助

小提琴：

---

行

var$checkboxID=$checkboxCategory.attr（'id'）将获取第一个选中元素的ID。选中多个复选框时，需要所有复选框的ID。为了做到这一点，您可以使用数组跟踪它们

大概是这样的：

$(document).ready(function() {

  $('#checkboxFilterContainer').find('input:checkbox').on("click", function() {
    var $blogpostsTotal = $('.blogpost').length;
    var $checkboxCategory = $('#checkboxFilterContainer').find('input:checked');
    var $checkboxID = $checkboxCategory.attr('id');
    var $checkboxIDs = [];
    $checkboxCategory.each(function(index, element) {
      $checkboxIDs.push(element.getAttribute('id'));
    });

    if ($checkboxCategory.length == 0) {
      $('.blogpost').removeClass('hide');
    } else {
      $('.blogpost').addClass('hide');
      for (var i = 0; i < $checkboxIDs.length; i++) {
        $('.' + $checkboxIDs[i]).removeClass('hide');
      }

    }
  })
})

$（文档）.ready（函数（）{
$（'#checkboxFilterContainer'）。查找（'input:checkbox'）。打开（“单击”，函数（））{
变量$blogpostotal=$（'.blogpost'）.length；
var$checkboxCategory=$（“#checkboxFilterContainer”）.find（'input:checked'）；
var$checkboxID=$checkboxCategory.attr（'id'）；
var$checkboxIDs=[]；
$checkboxCategory.每个（函数（索引、元素）{
$checkboxIDs.push（element.getAttribute（'id'））；
});
如果（$checkboxCategory.length==0）{
$（'.blogpost'）.removeClass（'hide'）；
}否则{
$（'.blogpost'）.addClass（'hide'）；
对于（变量i=0；i<$checkboxIDs.length；i++）{
$（'.+$checkboxId[i]）.removeClass（'hide'）；
}
}
})
})
试试这个；（在这里，
$allclasses和
的工作方式类似于
和
操作。它检查所有类中是否有任何元素。而
$allClassesOR
的工作方式类似于
或
操作。它试图匹配包含一个或多个匹配类的任何元素）

$（文档）.ready（函数（）{
$（'#checkboxFilterContainer'）。查找（'input:checkbox'）。打开（“单击”，函数（））{
变量$blogpostotal=$（'.blogpost'）.length；
var$checkboxCategory=$（“#checkboxFilterContainer”）.find（'input:checked'）；
if（$checkboxCategory&&$checkboxCategory.length！==0）{
$（'.blogpost'）.addClass（'hide'）；
设$checkboxID=[]；
对于（让index=0；index<$checkboxCategory.length；index++）{
$checkboxID.push（'.+$checkboxCategory[index].getAttribute（'id'））；
}
让$allClassesAND=$checkboxID.join（“”）；
让$allClassesOR=$checkboxID.join（'，'）；
如果（$（''+$allClassesAND）.length！==0）{
$（''+$allClassesAND）.removeClass（'hide'）；
}else if（$（''+$allClassesOR）.length！==0）{
$（''+$allClassesOR）.removeClass（'hide'）；
}
}否则{
$（'.blogpost'）.removeClass（'hide'）；
}
})
})
以上已通过多种方式解决，但仅供深入参考

您已正确地将
$checkboxCategory
设置为包含当前选中的所有元素，但在下一行（第6行）上使用的
.attr（）
方法仅获取“匹配元素集中第一个元素”的属性值

这是关于
.attr（）
方法的内容。
我根据您的类以动态方式对其进行了缩短和修改。请在末尾尝试此jquery代码，下面是工作原理

您可以通过在html中将类名定义为catagory来添加catagory，如下所示

<div class="blogpost hamiltonFilter splurgeFilter" style="display:none;">
  <h3>Toronto Splurge</h3>
</div>


多伦多挥霍
你能再澄清一下你想要什么吗？@Addis“hamiltonFilter”和“torontoFilter”属于同一类别（“citiesFilterContainer”）；'SpluggeFilter和cheapEatsFilter属于同一类别（“costFilterContainer”）。如果我在同一个类别中单击，我希望它具有OR效果（即使用类“hamiltonFilter”或“torontoFilter”显示div元素）。如果我在类别之间单击，我希望它具有AND效果（即使用类“hamiltonFilter”和“cheapEatsFilter”显示div元素）。这更有意义吗？“和”部分可以，但“或”部分没有意义。如何确定在这两个元素中显示哪个元素？您必须确定显示哪个元素，或者至少需要一些逻辑来在两者之间进行选择。请注意，标签上的
for
应该与其对应复选框的
id
匹配，而不是
名称
。由于下面的所有复选框都属于具有共享目的的同一个常规组，因此它们可能都具有相同的名称（类似于“过滤器”）。您可以判断标签是否正确连接到输入，因为如果标签正确连接，您可以通过单击标签而不是输入本身来选择输入（选中/取消选中复选框、选择收音机、聚焦文本输入等）。如果它们没有正确连接，单击标签将无效。
$(document).ready(function() {

  $('#checkboxFilterContainer').find('input:checkbox').on("click", function() {

    var $blogpostsTotal = $('.blogpost').length;
    var $checkboxCategory = $('#checkboxFilterContainer').find('input:checked');

    if( $checkboxCategory && $checkboxCategory.length !== 0 ) {

      $('.blogpost').addClass('hide');

      let $checkboxID = [];
      for( let index = 0; index < $checkboxCategory.length; index++ ) {
        $checkboxID.push( '.' + $checkboxCategory[index].getAttribute('id') );
      }

      let $allClassesAND = $checkboxID.join('');
      let $allClassesOR = $checkboxID.join(', ');

      if( $( '' + $allClassesAND ).length !== 0 ) {
        $( '' + $allClassesAND ).removeClass('hide');

      } else if( $( '' + $allClassesOR ).length !== 0 ) {
        $( '' + $allClassesOR ).removeClass('hide');

      }


    } else {
      $('.blogpost').removeClass('hide');

    }

  })
})

$('.blogpostCategory').change(function () {
 $(".blogpost").hide();
    $('.blogpostCategory:checkbox:checked').each(function () {   
    if($(".blogpost").hasClass( this.id ));
    {  
  $("."+this.id).show();
    }      
  });
 });

<div class="blogpost hamiltonFilter splurgeFilter" style="display:none;">
  <h3>Toronto Splurge</h3>
</div>