选中/取消选中同位素中的输入复选框

Posted 2023-05-08

【中文标题】选中/取消选中同位素中的输入复选框

【英文标题】：Check/uncheck input checkboxes in Isotope

【发布时间】：2022-01-01 10:24:03

【问题描述】：

我有一个带有复选框输入的简单同位素网格，用于对网格中的项目进行排序。这工作正常。问题是“显示全部”复选框和不同类别复选框之间的交互。

选中“显示全部”后，我必须手动取消选中它才能选中任何类别复选框。当我取消选中所有类别时，我希望“显示全部”检查自身以指示所有类别项目都被显示。

https://codepen.io/bluedogranch/pen/MWvdyNm

当任何一个或所有类别被选中时，如何让“显示全部”取消选中？

当所有类别都未选中时，如何让“显示全部”自行检查？

和

如何在页面加载时检查“全部显示”？

jQuery

var $container = $('#container').isotope(
    itemSelector: '.product',
    layoutMode: 'fitRows',
    transitionDuration: '0.2s'
  );
  
  var $checkboxes = $('#filters input');
  $checkboxes.change(function()
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function()
      filters.push( this.value );
    );
    filters = filters.join(', ');
    $container.isotope( filter: filters );
  );

CSS

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


#container 
width:400px;

HTML

<div id="filters">
<label><input type="checkbox" value="*"  id="all">Show all</a></li>
<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>

【参考方案1】：

关于#1 和#2，只需在活动期间检查更改了哪个目标即可。你可以通过访问event.currentTarget来做到这一点。

  $checkboxes.change(function(event) 

在此之后，只需添加逻辑：

    let currentTarget = event.currentTarget;
    // if all is selected, deselect others
    if (currentTarget.id == "all")
      $("#filters input:not(#all)").prop("checked", false);
    else // remove the checked prop from all
      $("#all").prop("checked",false);
    // if none is checked anymore, check all
    if (!$checkboxes.filter(":checked").length)
      $("#all").prop("checked", true)
    // your code
    var filters ...

关于第三个，只需将checked 属性添加到输入字段即可。

<label><input type="checkbox" value="*" checked id="all">Show all</label>

【讨论】：

谢谢！这样可行。我最终在 html 输入中使用 $('#all').prop('checked', true); $("#filters input:not(#all)").prop("checked", false); 并准备好文档而不是 checked 以强制“显示全部”并取消选中其他页面加载。 Codepen 已更新。