根据复选框显示和隐藏我的 div答案

【问题标题】：Showing and hiding my divs based on checkboxes根据复选框显示和隐藏我的 div
【发布时间】：2017-10-30 01:30:39
【问题描述】：

我有很多 div，都属于 product_listing 类。它们都有一个data-category 属性，即accessory、hardware、mobile 或software。在我的 javascript 中，我只想显示选中了其类别复选框的那些。我在 html 中的复选框编码为：

<input type="checkbox" name="category_filter" value="all" 
checked="checked">&nbsp;All</input><br />

<input type="checkbox" name="category_filter" 
value="accessory">&nbsp;Accessory<br />

<input type="checkbox" name="category_filter" 
value="hardware">&nbsp;Hardware<br />

<input type="checkbox" name="category_filter" value="mobile">&nbsp;Mobile 
App<br />

<input type="checkbox" name="category_filter" 
value="software">&nbsp;Software<br />

在我的 javascript 中，我有数组 accessory_products、hardware_products、mobile_products 和 software_products，所以我只需要根据复选框显示和隐藏它们。我只是不知道如何制作 if 语句来检查哪些框被选中。任何人都可以帮忙吗？当然，我使用的是 jquery。

【问题讨论】：

你能展示一下你到目前为止所做的尝试吗？
到目前为止你尝试过什么？您的问题是否与this question 类似，但不是通过 id 获取元素，而是通过 data-category 属性获取它？
从一个复选框和一组匹配元素开始。 Stackoverflow 不是免费的代码编写服务或“如何” 教程服务。做一些基础研究并展示自己解决问题的一些尝试取决于您。然后，当您的实际代码无法按预期工作时，请寻求帮助

标签： javascript jquery

【解决方案1】：

我建议将来显示您尝试编写的代码，以便堆栈用户可以为您提供帮助并帮助您解决问题所在。

这里应该为您指明方向 - 它不完整，但会帮助您完成您的解决方案。

https://codepen.io/zell71/pen/gXpbKb

HTML：

<input type="checkbox" class="category_filter" value="all" checked="checked">&nbsp;All</input>
<br />

<input type="checkbox" class="category_filter" value="accessory">&nbsp;Accessory
<br />

<input type="checkbox" class="category_filter" value="hardware">&nbsp;Hardware
<br />

<input type="checkbox" class="category_filter" value="mobile">&nbsp;Mobile App
<br />

<input type="checkbox" class="category_filter" value="software">&nbsp;Software
<br />

<div class="wrapper">
  <div class="products" data-category="accessory">
    <h3>Accessory</h3>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </div>
  <div class="products" data-category="hardware">
    <h3>Hardware</h3>
    <ul>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
    </ul>
  </div>
  <div class="products" data-category="mobile">
    <h3>Mobile App</h3>
    <p> no results </p>
  </div>
  <div class="products" data-category="software">
    <h3>Software</h3>
    <ul>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
    </ul>
  </div>
</div>

JS：

$(".category_filter").change(function(e) {
  var $this = $(this);
  var inputValue = $this.val();
  // hide the products again
  $(".products").hide();
  // check if the input box is checked so we don't display a collection that is being unchecked
  if ($this.prop("checked")) {    
    console.log(inputValue);
    if ((inputValue = "all")) {
      $(".products").show();
    } else {
      // show the product collection we need
      $('.products[data-category="' + inputValue + '"]').show();
    }
  }
});

谢谢

【讨论】：