Showing and hiding my divs based on checkboxes

Question

I have lots of divs, all with the class product_listing. They all have a data-category property, which is either accessory, hardware, mobile, or software. In my javascript, I want to only show the ones with the checkbox for their category checked. My checkboxes in the html are coded as:

<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 />

In my javascript I have the arrays accessory_products, hardware_products, mobile_products, and software_products, so I just need to show and hide them based on checked boxes. I just don't know how to make the if statements to check which boxes are checked. Can anyone help? I'm using jquery, of course.

What have you tried so far? Is your problem similar to [this question](https://stackoverflow.com/questions/19447591/show-hide-div-when-checkbox-selected) but instead of getting the element by id, you get it by the data-category attribute? — Kenneth Key, Oct 30 '17 at 01:38
Start simple with one checkbox and one set of matching elements. Stackoverflow isn't a free code writing service or a *"how to"* tutorial service. It's up to you to do some basic research and show some attempt at solving issues yourself. Then when you have actual code that isn't working as expected ask for help then — charlietfl, Oct 30 '17 at 01:38

score 0 · Answer 1 · answered Oct 31 '17 at 06:22

In future i'd recommend displaying what you've attempted to code so stack users can assist you and assist with where you have gone wrong.

Here is something that should point you in the direction - it is not complete but will assist you in completing your solution.

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();
    }
  }
});

thanks

Showing and hiding my divs based on checkboxes

1 Answers1