jQuery multiple selector with overruling

Question

I have a list of div's I want to filter with 2 groups of checkboxes: Type and Category.

When 2 categories are checked, it should show DIV's containing at least 1 of the categories.

When a type is checked, it should only shows DIV's from that type. Even if it contains a checked category.

<input type="checkbox" name="type[]" value="Type 1">
<input type="checkbox" name="type[]" value="Type 2">
<input type="checkbox" name="type[]" value="Type 3">

<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">

The DIV's:

<div data-type="Type 1" data-cat="1 4">
<div data-type="Type 2" data-cat="1 2 3">

The code I have so far (only filters type):

$('form input:checkbox').change(function(){
  var type = [];
  var checked = $(':checkbox:checked').length;

  // Hide all
  $('#videoHolder').children('div').hide();

  $(':checkbox:checked').each(function(i){
    type[i] = $(this).val();
    $('#videoHolder').children('div[data-type="' + type[i] + '"]').fadeIn();
  });

  // Show all
  if(checked==0){
      $('#videoHolder').children('div').fadeIn();
  } 
});

Here's a Fiddle: [link](http://jsfiddle.net/4F5Bz/) – Veur Nov 15 '12 at 09:11 — Veur, Nov 15 '12 at 09:11

score 0 · Accepted Answer · edited May 23 '17 at 12:18

0

You would need to check each category attribute by hand. Or you might consider using the regEx plugin for jQuery.

// select only category check box-es!!
$(':checkbox:checked').each(function(i, checkBox){

    var search = $(checkBox).val();

    $('#videoHolder').children('div').each(function(index, divTag) {
      var category = $(divTag).attr("data-cat");
      var dataType = $(divTag).attr("data-type");

     if (isOfType(search, dataType) || containsCategory(search, category))
         $(divTag).fadeIn();
     });
  });

edited May 23 '17 at 12:18

Community

1
1

answered Nov 15 '12 at 09:12

Drejc

14,196
16
71
106

This will only filter on `category`. How to add the `type` filter to this? – Veur Nov 15 '12 at 09:59
Added an additional IF .... but this is just the general idea how to make this work. For instance you could filter checkboxes by attribute value prior the each loop. – Drejc Nov 16 '12 at 07:12

jQuery multiple selector with overruling

1 Answers1