mercredi 30 septembre 2015

How to use javascript to filter table rows based on multiple sections of checkboxes

I have the following checkboxes in a form that allows me to show/hide rows in a table. Each section of checkboxes works fine, but how do I make one section check the status of the other section of checkboxes, so the logic filters based on all selections?

I hope you can see what I am trying to do based on my snippet of sample data:

$(document).ready(function() {
  $("#type :checkbox").click(function() {
    $("td").parent().hide();
    $("#type :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
  $("#fee :checkbox").click(function() {
    $("td").parent().hide();
    $("#fee :checkbox:checked").each(function() {
      $("." + $(this).val()).parent().show();
    });
  });
});
<script src="http://ift.tt/1qRgvOJ"></script>

<form name="repaymentcalc" id="myForm" action="">


  <section id="type">

    <p id="Mortgage Type">Mortgage Type</p>
    <input type="checkbox" name="type" value="t2" id="t2" checked/>2yr Fixed
    <br>
    <input type="checkbox" name="type" value="t3" id="t3" checked/>3yr Fixed
    <br>
    <input type="checkbox" name="type" value="t5" id="t5" checked/>5yr Fixed
    <br>

  </section>

  <section id="fee">

    <p id="Fee">Fee</p>
    <input type="checkbox" name="fee" value="fee" id="fee" checked/>Fee
    <br>
    <input type="checkbox" name="fee" value="nofee" id="nofee" checked/>No Fee
    <br>

  </section>

</form>

<table id="mortgagetable">

  <tbody>

    <tr class="product">
      <td class="t2">2yr Fixed</td>
      <td class="initialrate">1.29</td>
      <td class="fee">999</td>
    </tr>
    <tr class="product">
      <td class="t3">3yr Fixed</td>
      <td class="initialrate">1.29</td>
      <td class="fee">999</td>
    </tr>
    <tr class="product">
      <td class="t5">5yr Fixed</td>
      <td class="initialrate">1.29</td>
      <td class="fee">999</td>
    </tr>
    <tr class="product">
      <td class="t2">2yr Fixed</td>
      <td class="initialrate">1.29</td>
      <td class="nofee">no fee</td>
    </tr>
    <tr class="product">
      <td class="t3">3yr Fixed</td>
      <td class="initialrate">1.29</td>
      <td class="nofee">no fee</td>
    </tr>
    <tr class="product">
      <td class="t5">5yr Fixed</td>
      <td class="initialrate">1.29</td>
      <td class="nofee">no fee</td>
    </tr>

  </tbody>

</table>



Aucun commentaire:

Enregistrer un commentaire