jQuery Checkbox with multiple filters

Question

I am trying to add two filtering options using check boxes. The first would filter the divs based on who the thing is assign to (in this case Nangle or Fahon) and a second filter based on the status (in this case either Todo or Pending Us). Below is my code so far.

$(document).ready(function(e) {
  $('input[type="checkbox"]').click(function() {
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span6">
  <div class="portlet box blue checkbox-assigned">
    <div class="portlet-title">
      <div class="caption"><i class="icon-globe"></i>Jobs</div>
    </div>

    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="76" checked=""></span></div> Fahon</label>

    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="60" checked=""></span></div> Nangle</label>


    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Todo" checked=""></span></div> Todo</label>

    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Pending Us" checked=""></span></div> Pending Us</label>
  </div>
  <div style="height: 500px; overflow-y: scroll">
    <div class=" 76 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">Pizza</strong> Job Name: <strong>Machine not working</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>

        </div>
        <div>
          Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:14</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/43"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    <div class=" 60 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">The Castle</strong> Job Name: <strong>Accounts</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Nangle</strong></a>

        </div>
        <div>
          Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:19</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/44"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    <div class=" 76 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">Time</strong> Job Name: <strong>Marketing Visit</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>

        </div>
        <div>
          Created On <strong>25/10/2017</strong> Last Updated: <strong>25/10/2017 10:32</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/51"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

@RamizWachtler It does not work in its current form and I am trying to figure out a way to make it work — Dimitar Arabadzhiyski
– Dimitar Arabadzhiyski, Commented Dec 15, 2017 at 16:14
"It does not work". Elaborate please. Assume we are not familiar with your problem as you are. Cause, we're not. — Taplar
– Taplar, Commented Dec 15, 2017 at 16:14
@Taplar Sorry I'll try to be more precise. So the way it works now if I uncheck a box with a name on it (Nangle or Fahon) it works and hides them, when I want to filter the information based on status (Todo or Pending Us) it works again. However it does not work for some scenarios. For instance, if i uncheck Fahon and then uncheck Todo, when I check Todo again Fahon will appear again even though the box for Fahon is unchecked. This is what I am trying to solve. — Dimitar Arabadzhiyski
– Dimitar Arabadzhiyski, Commented Dec 15, 2017 at 16:27
Well one issue you are going to run into is ".Pending Us" is not a valid class selector. That space is going to make 'Us' act like a child selector, of which is not valid. — Taplar
– Taplar, Commented Dec 15, 2017 at 16:31

Taplar · Accepted Answer · 2017-12-15 16:46:13Z

$(document).ready(function() {
  var $checkboxes = $('input:checkbox'); //get all the checkboxes
  var $fields = $($checkboxes.map(function(){ return '.'+ this.value; }).get().join(',')); //get all the fields
  
  $checkboxes.on('click', function(e) {
    if (e.target.checked) {
      //if you recheck a filter, we need to reevaluate all the checkboxes so we don't re-check one that should not be
      $fields.show();
      $checkboxes.not(':checked').each(function(){
        $fields.filter('.'+ this.value).hide();
      });
    } else {
      //if you uncheck a filter, just hide the related fields
      $fields.filter('.'+ e.target.value).hide();
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span6">
  <div class="portlet box blue checkbox-assigned">
    <div class="portlet-title">
      <div class="caption"><i class="icon-globe"></i>Jobs</div>
    </div>

    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="76" checked=""></span></div> Fahon</label>

    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="60" checked=""></span></div> Nangle</label>


    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Todo" checked=""></span></div> Todo</label>

    <label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Pending Us" checked=""></span></div> Pending Us</label>
  </div>
  <div style="height: 500px; overflow-y: scroll">
    <div class=" 76 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">Pizza</strong> Job Name: <strong>Machine not working</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>

        </div>
        <div>
          Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:14</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/43"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    <div class=" 60 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">The Castle</strong> Job Name: <strong>Accounts</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Nangle</strong></a>

        </div>
        <div>
          Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:19</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/44"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    <div class=" 76 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">Time</strong> Job Name: <strong>Marketing Visit</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>

        </div>
        <div>
          Created On <strong>25/10/2017</strong> Last Updated: <strong>25/10/2017 10:32</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/51"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

halfer · Accepted Answer · 2018-01-23 23:32:14Z

Since you're using the OR in your description (Nangle or Fahon) that means you've to use radio instead of checkbox, the it will be simple to show/hide the divs :

$('input[type="radio"]').change(function() {
    var classes = $('input[type="radio"]:checked').map(function() {
      return $(this).val();
    }).get();

    $('#stats-container>div').hide(); //Hide all
    $("." + classes.join('.')).show(); //Show filtred
});

NOTE : Giving your container an identifier like stats-container in my example gives you the ability to hide all the divs before every filter.

$(document).ready(function(e) {
  $('input[type="radio"]').change(function() {
    var classes = $('input[type="radio"]:checked').map(function() {
      return $(this).val();
    }).get();

    $('#stats-container>div').hide(); //Hide all
    $("." + classes.join('.')).show(); //Show filtred
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span6">
  <div class="portlet box blue checkbox-assigned">
    <div class="portlet-title">
      <div class="caption"><i class="icon-globe"></i>Jobs</div>
    </div>

    <label><div class="checker"><span class="checked"><input type="radio" name="radio1" value="76" checked=""></span></div> Fahon</label>

    <label><div class="checker"><span class="checked"><input type="radio" name="radio1" value="60" checked=""></span></div> Nangle</label>


    <label><div class="checker"><span class="checked"><input type="radio" name="radio2" value="Todo" checked=""></span></div> Todo</label>

    <label><div class="checker"><span class="checked"><input type="radio" name="radio2" value="Pending Us" checked=""></span></div> Pending Us</label>
  </div>
  <div style="height: 500px; overflow-y: scroll" id="stats-container">
    <div class=" 76 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">Pizza</strong> Job Name: <strong>Machine not working</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>

        </div>
        <div>
          Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:14</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/43"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    <div class=" 60 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">The Castle</strong> Job Name: <strong>Accounts</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Nangle</strong></a>

        </div>
        <div>
          Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:19</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/44"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
    <div class=" 76 Todo">


      <div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
        <div>
          Shop Name: <strong style="padding-right: 3em">Time</strong> Job Name: <strong>Marketing Visit</strong> -
          <strong>Todo</strong>
          <a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>

        <div>
          Created By: <strong>Nangle</strong>
          <a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>

        </div>
        <div>
          Created On <strong>25/10/2017</strong> Last Updated: <strong>25/10/2017 10:32</strong>
          <a style="float: right; color: #000000;" href="index.php?/job/view/51"><strong>View</strong></a>
        </div>
      </div>
      <div class="containerr collapsed">
        <div class="headerTab"></div>
        <div class="content dashboard-stat blue">
          <p> message </p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Collectives™ on Stack Overflow

jQuery Checkbox with multiple filters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related