Checkboxes + Jquery hide / show

Question

I have a series of rows and checkboxes for filtering them:

<ul> 
<li><input id="type-A" type="checkbox" checked="checked"> <a href="/A">A</a></li>
<li><input id="type-B" type="checkbox" checked="checked"> <a href="/B">B</a></li>
<li><input id="type-C" type="checkbox" checked="checked"> <a href="/C">C</a></li>
<li><input id="type-D" type="checkbox" checked="checked"> <a href="/D">D</a></li>
<li><input id="type-E" type="checkbox" checked="checked"> <a href="/E">E</a></li>
<li><input id="type-F" type="checkbox" checked="checked"> <a href="/F">F</a></li>
</ul>

<table>
<tr class="A">filler</tr>
<tr class="B">filler</tr>
<tr class="A B">filler</tr>
<tr class="C D">filler</tr>
<tr class="A F">filler</tr>
<tr class="A E F">filler</tr>
<tr class="F">filler</tr>
<tr class="C D E">filler</tr>
<tr class="A B C D E F">filler</tr>
</table>

I would like to hide / show lines based on what is checked. I am currently using (using this previous question: Use "his" to simplify the code (simple jQuery) ):

$(function(){
  $("input[id^='type-']").change(function() {
    $("."+this.id.replace('type-','')).toggle(this.checked);
  }).change(); 
});

Which toggles what appears every time the window is clicked and works fine if each row has only one class. But they do not. Now that it is configured, the order of clicking changes the displayed lines. So I need to create a function that checks which checkboxes are checked and shows the lines containing any of them. I do not mind adding a button to make this happen.

( , ), , , !

Answer 1

, .

$(function(){
  var $checkboxes = $("input[id^='type-']");
  $checkboxes.change(function() {
    var selector = '';
    $checkboxes.filter(':checked').each(function(){ // checked 
        selector += '.' + this.id.replace('type-','') + ', '; 
        // builds a selector like '.A, .B, .C, ' 
    });
    selector = selector.substring(0, selector.length - 2); // remove trailing ', '
    // tr selector
    $('table tr').hide() // hide all rows
       .filter(selector).show(); // reduce set to matched and show
  }).change(); 
});

EDIT: . jsfiddle

Answer 2

jQuery ! .filter(), , , DOM, jQuery. . jQuery :has(), . , (li elements), , :

$("li").filter(":has(input:checked)");

filter() $():

$("li:has(input:checked)");

li , - , .

.change():

, tr , , li, , tr , . , .toggle(), :

$(function(){
  $("input[id^='type-']").change(function() {
    $("."+this.id.replace('type-','')).toggle(this.checked);
    // show any tr elements that have the class relating to the type of the inputs that contain checked checkboxes... 
    $("li:has(input:checked)").each(function() {
      $("tr" + "." + this.id.replace(/type-/, "")).toggle();
    });
  }).change(); 
});

Answer 3

  $("table tr").hide();
  $("input[id^='type-']").each(function() {
    element = $(this);
    $("table tr").each(function() {
      if($(this).hasClass(element.id.replace('type-','')) {
        if(element.is(":checked") {
          element.show();
        }
      }
    });
  }).change();