Javascript过滤复选框值的内容

Posted 2023-05-08

【中文标题】Javascript过滤复选框值的内容

【英文标题】：Javascript filtering content on checkbox value

【发布时间】：2016-10-04 02:15:33

【问题描述】：

我有这样的代码

<div id="filter">
</div>
<div id="items">
    <div class="item">
        <h2>Orange</h2>
        <img src="orange.png"  />
    </div>
    <div class="item">
        <h2>Banana</h2>
        <img src="banana.png"  />
    </div>
</div>

我想在其子 img src 值上过滤具有“item”类的 div。例如，如果我检查了输入女巫值banana.png，则应仅显示具有相同 img src 值的 .item。休息必须隐藏。

如果您取消选中复选框，则应再次进行控制 - 通过选中复选框隐藏的项目应再次显示。

我有创建正确复选框的相同代码，但如何休息？

$("#items > div").find("img").each(function() 
    var value = $(this).attr("src");
    $("#filter").append('<label><input type="checkbox" [value="' + value + '"]>' + value + '</label>');
    var toFilter = $("#items > div").find("img");
);

你也可以看到我的 codepen http://codepen.io/anon/pen/gMpGaE?editors=0010

【参考方案1】：

您可以像这样使用复选框的change 事件过滤div。

$("#items > div").find("img").each(function() 
  var value = $(this).attr("src");
  $("#filter").append('<label><input type="checkbox" value="' + value + '">' + value + '</label>');
  var toFilter = $("#items > div").find("img");
);
$('#filter').on('change', ':checkbox', function() 
  var checkedArray = $('#filter :checkbox:checked').map(function() 
    return this.value;
  ).get();
  if (checkedArray.length) 
    $("#items .item").hide();
    match = $("#items > div").find("img")
      .filter(function() 
        return checkedArray.indexOf($(this).attr('src')) != -1;
      ).closest('.item').show();
   else 
    $("#items .item").show();
  
)

#items > div 
  border: 1px dotted #355B78;
  margin-bottom: 10px;

label 
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filter">

</div>
<div id="items">
  <div class="item">
    <h2>Orange</h2>
    <img src="orange.png"  />
  </div>
  <div class="item">
    <h2>Banana</h2>
    <img src="banana.png"  />
  </div>
  <div class="item">
    <h2>Orange</h2>
    <img src="orange.png"  />
  </div>
  <div class="item">
    <h2>Banana</h2>
    <img src="banana.png"  />
  </div>
</div>

【讨论】：

很好，但是当您取消选中输入时，它会隐藏所有内容。

@KarolinaTicha 已更新。