Isotope网格筛选中全选与分类复选框交互逻辑实现问题

步骤1：修正HTML错误并添加默认勾选 #

原HTML中Show All对应的标签存在冗余无效标签，修正后同时给全选框加checked默认选中属性，满足页面加载默认勾选Show All的需求：

<div id="filters">
<label><input type="checkbox" value="*"  id="all" checked>Show all</label>
<label><input type="checkbox" value=".category1" id="category1">Category 1</label>
<label><input type="checkbox" value=".category2" id="category2">Category 2</label>
<label><input type="checkbox" value=".category3" id="category3">Category 3</label>
</div>
<div id="container">
<div class="product category1">1</div>
<div class="product category1 category2 ">1,2</div>
<div class="product category1 category3">1,3</div>
<div class="product category2">2</div>
<div class="product category2 category3">2,3</div>
<div class="product category3">3</div>
<div class="product category3 category2">3,2</div>
<div class="product category1">1</div>
<div class="product category2">2</div>
<div class="product category3">3</div>
<div class="product category2">2</div>
<div class="product category1">1</div>
</div>

步骤2：修正CSS闭合缺失 #

原CSS代码末尾缺少}闭合，补全后：

.product  {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  padding:10px;
  text-align:center;
  margin: 5px;
}
#container {
  width:400px;
}

步骤3：修改jQuery逻辑实现交互需求 #

修改后的jQuery代码如下，覆盖所有需求点：

var $container = $('#container').isotope({
  itemSelector: '.product',
  layoutMode: 'fitRows',
  transitionDuration: '0.2s'
});
var $allCheckbox = $('#all');
var $categoryCheckboxes = $('#filters input:not(#all)');
var $checkboxes = $('#filters input');

// 复选框change事件监听
$checkboxes.change(function(){
  // 判断当前点击的是不是全选框
  if($(this).is($allCheckbox)){
    // 如果勾选了全选框，清空所有分类复选框的选中状态
    if($allCheckbox.is(':checked')){
      $categoryCheckboxes.prop('checked', false);
    }
  }else{
    // 点击的是分类复选框
    var checkedCategoryCount = $categoryCheckboxes.filter(':checked').length;
    if(checkedCategoryCount > 0){
      // 有分类被勾选，取消全选框状态
      $allCheckbox.prop('checked', false);
    }else{
      // 没有分类被勾选，自动选中全选框
      $allCheckbox.prop('checked', true);
    }
  }

  // 组装筛选条件
  var filters = [];
  $checkboxes.filter(':checked').each(function(){
    filters.push(this.value);
  });
  filters = filters.join(', ');
  $container.isotope({ filter: filters });
});

逻辑说明 #

• 勾选任意分类复选框时，会自动取消Show All的选中状态
• 所有分类复选框都被取消勾选时，会自动选中Show All
• HTML中给Show All加了checked属性，页面加载默认勾选
• 点击Show All时会自动清空所有分类的选中状态，符合常规筛选交互逻辑

内容的提问来源于stack exchange，提问作者user5853892