title: How to show table rows based on checkbox selected
body: <p>I have three check boxes of types "One", "Two"and "Three" and a table which
  is having a column as 'Type' that contains three distinct values One, Two and Three across few rows. <br>
  My requirement is, based on the check boxes selected or deselected only those rows of the table should be shown for which the value of the 'Type' column match the check box value.<br/> </p>
  
  <p><code>For example,</code> <br/></p>
  
  <p>if check box "One" is selected, those rows having "One" as Type should be shown.<br>
  if both "One" and "Three" is selected,those rows having "One" and "Three" as type should be displayed. <br>
  again if "Three" is deselected, rows matching "Three" as Type should be hidden,only rows of Type "One" should be shown and so on. <br></p>
  
  <p>But, I am not able to produce the desired result, attached the code below, can anybody please help.</p>
  
  <pre><code> &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.    min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Hello &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
  &lt;input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "One" /&gt;
                   One
       &lt;/td&gt;
      &lt;td&gt;
  &lt;input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Two" /&gt;
                   Two
      &lt;/td&gt;
      &lt;td&gt;
  &lt;input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Three" /&gt;
                   Three
      &lt;/td&gt;
      &lt;/tr&gt;
   &lt;/table&gt;
  
   &lt;table class="datatbl"  border=1&gt;
      &lt;tr&gt;
          &lt;th&gt;No.&lt;/th&gt;
          &lt;th&gt;Content&lt;/th&gt;
          &lt;th&gt;Type&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;this is first row&lt;/td&gt;
          &lt;td&gt;One&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;this is second row&lt;/td&gt;
          &lt;td&gt;Two&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;this is third row&lt;/td&gt;
          &lt;td&gt;Three&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;this is fourth row&lt;/td&gt;
          &lt;td&gt;One&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;5&lt;/td&gt;
          &lt;td&gt;this is fifth row&lt;/td&gt;
          &lt;td&gt;Two&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;6&lt;/td&gt;
          &lt;td&gt;this is sixth row&lt;/td&gt;
          &lt;td&gt;Three&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;style&gt;
  .datatbl {
  background-color: palegreen;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function filter_type(box) {
  //alert("checked");
   var cbs = document.getElementsByTagName('input');
   var all_checked_types = [];
   for(var i=0; i &lt; cbs.length; i++) {
       if(cbs[i].type == "checkbox") {
               if(cbs[i].name.match(/^filter/)) {
                       if(cbs[i].checked) {
                           all_checked_types.push(cbs[i].value);
                        }
                    }
             }
    }
   //alert("all checked "+ all_checked_types);
   if (all_checked_types.length &gt; 0) {
       $('.datatbl tr').each(function (i, row) {
           var $tds = $(this).find('td'),
           type = $tds.eq(2).text();
           if (type &amp;&amp; all_checked_types.indexOf(type) &gt;= 0) {
               //alert("matched");
               $(this).show();
            }
        });
    }
      else {
          $('.datatbl tr').each(function (i, row) {
              var $tds = $(this).find('td'),
              type = $tds.eq(2).text();
              $(this).show();
           });
      }
      return true;
   }  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function filter_type(box) {
  //alert("checked");
   var cbs = document.getElementsByTagName('input');
   var all_checked_types = [];
   for(var i=0; i &lt; cbs.length; i++) {
    if(cbs[i].type == "checkbox") {
            if(cbs[i].name.match(/^filter/)) {
                       if(cbs[i].checked) {
                           all_checked_types.push(cbs[i].value);
                        }
                    }
             }
    }
   //alert("all checked "+ all_checked_types);
   if (all_checked_types.length &gt; 0) {
       $('.datatbl tr').each(function (i, row) {
           var $tds = $(this).find('td'),
           type = $tds.eq(2).text();
           if (type &amp;&amp; all_checked_types.indexOf(type) &gt;= 0) {
               //alert("matched");
               $(this).show();
            }
        });
    }
      else {
          $('.datatbl tr').each(function (i, row) {
              var $tds = $(this).find('td'),
              type = $tds.eq(2).text();
              $(this).show();
           });
      }
      return true;
  } </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.datatbl {
  background-color: palegreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
   &lt;script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery. min.js"&gt;&lt;/script&gt;
   &lt;title&gt;Hello &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table&gt;
   &lt;tr&gt;
    &lt;td&gt;
  &lt;input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "One" /&gt;
                   One
    &lt;/td&gt;
   &lt;td&gt;
  &lt;input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Two" /&gt;
                   Two
   &lt;/td&gt;
   &lt;td&gt;
  &lt;input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Three" /&gt;
                   Three
   &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
  
   &lt;table class="datatbl"  border=1&gt;
   &lt;tr&gt;
    &lt;th&gt;No.&lt;/th&gt;
    &lt;th&gt;Content&lt;/th&gt;
    &lt;th&gt;Type&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;this is first row&lt;/td&gt;
    &lt;td&gt;One&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;this is second row&lt;/td&gt;
    &lt;td&gt;Two&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;this is third row&lt;/td&gt;
    &lt;td&gt;Three&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;this is fourth row&lt;/td&gt;
    &lt;td&gt;One&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;this is fifth row&lt;/td&gt;
    &lt;td&gt;Two&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;6&lt;/td&gt;
    &lt;td&gt;this is sixth row&lt;/td&gt;
    &lt;td&gt;Three&lt;/td&gt;
   &lt;/tr&gt;
  
  &lt;/table&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>