如何使用javascript根据复选框的多个部分过滤表格行

Question

我在表单中有以下复选框，允许我显示/隐藏表格中的行。复选框的每个部分都可以正常工作，但是如何让一个部分检查复选框其他部分的状态，以便逻辑过滤所有选择？

我希望你能根据我的样本数据片段看到我想要做的事情：

＆＃13;

＆＃13;

$(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();
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

合并与下面类似的复选框点击处理程序

$(":checkbox").click(function () {
    var typeVals = [],
        feeVals = [];

    $("tr").hide();
    $("#type :checkbox:checked").each(function () {
        typeVals.push($(this).val());
    });
    $("#fee :checkbox:checked").each(function () {
        feeVals.push($(this).val());
    });

    for (var i = 0; i < typeVals.length; i++) {
        for (var j = 0; j < feeVals.length; j++) {
            $('td.' + typeVals[i] + '~ td.' + feeVals[j]).closest('tr').show();
        }
    }
});

Answer 2

＆＃13;

＆＃13;

function MortgageTypeCheckbox(row){
    var bHide = true;
    $('#type input[type=checkbox]:checked').each(function(){
        var chkValue = $(this).val();
        console.log(chkValue);
        if($(row).find('td.'+chkValue).length){
            bHide = false;
            return false;
        }
    });
    
    return bHide;
}
function FeeCheckbox(row){
    var bHide = true;
    $('#fee input[type=checkbox]:checked').each(function(){
        var chkValue = $(this).val();
        console.log(chkValue);
        if($(row).find('td.'+chkValue).length){
            bHide = false;
            return false;
        }
    });
    
    return bHide;
}

＆＃13;

<form name="repaymentcalc" id="calcform" 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>

＆＃13;

＆＃13;

＆＃13;