If Checkbox Is Checked Remove Class From Div On Click

Posted a question on about the same project in the morning. After battling it for a while came up with a bit different approach. Trying to build a filter. And the idea is that a fi

Solution 1:

Do you mean something like

var $filters = $('.filtercheck').change(function() {
  var $items = $('.inditem').hide();
  var filters = $filters.filter(':checked').map(function() {
    return '.' + this.id;
  }).get();
  if (filters.length) {
    $items.filter(filters.join()).show();
  } else {
    $items.show();
  }
});

.checkeditem {
  display: block !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="itemswrap">
  <div class="inditem dynamic1">dynamic1</div>
  <div class="inditem dynamic2">dynamic2</div>
  <div class="inditem dynamic3">dynamic3</div>
  <div class="inditem dynamic2">dynamic2</div>
</div>
<ul class="subnav">
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic1" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic2" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic3" />
    <label for="dynamic1">whatever label</label>
  </li>
</ul>

Solution 2:

The problem with the code is that the event handler attaches the second click event on the first successful case. This means that the "click" on the checkbox is being given the "addclass" case, and all subsequent clicks are being handled by that handler instead of the intended one.

Using the same HTML. I created this:

$(document).ready(function() {
  $(".filtercheck").click(function(){
    $('.inditem').hide();
    var filter1 = $(this).attr('id');

    $('.' + filter1).toggleClass('checkeditem');
  });
});

which I think is the intended behavior? Instead of individually attaching click handlers, I simply attached a single handler to all of them. It would be fairly easy to do something like

$(this).prop()

to determine if the currently clicked on item had was active or not. For this simple example, I opted to just use a class toggle to illustrate the point.