javascript - 复选框逻辑无法正常工作

Question

我有以下表单，其中有几个复选框。每组复选框都工作正常，但是当您更改另一组复选框中的输入时，它不再根据第一组进行过滤(反之亦然)。

我需要每组的逻辑来交叉，但不确定如何实现？

$(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();
    });
  });
});
var repayment = function() {

};
window.onload = function() {
  document.repaymentcalc.homevalue.onchange = repayment;
  document.repaymentcalc.loanamount.onchange = repayment;
  document.repaymentcalc.numberpayments.onchange = function() {
    $('#years').html(this.value + ' years');
  };
  makeSomething();
};

function makeSomething() {
  $('tbody tr').each(function(idx, row) {
    var $row = $(row);
    var initialRateCell = $row.find('td')[2];
    var repaymentCell = $row.find('td').last()
    var rate = parseFloat($(initialRateCell).html());
    var repaymentVal = computeRepayment(rate);
    $(repaymentCell).html(repaymentVal.repayment);
  });
}
$("#myForm :input").change(function() {
  makeSomething();
});

function computeRepayment(rate) {
  var x = parseInt(document.repaymentcalc.loanamount.value, 10);
  var y = parseInt(rate * 100, 10) / 120000;
  var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12;
  var h = parseInt(document.repaymentcalc.homevalue.value, 10);

  var repayment = y * x * Math.pow((1 + y), z) / (Math.pow((1 + y), z) - 1);

  var loantovalue = x / h * 100;

  var year = z / 12;
  return {
    repayment: repayment.toFixed(2),
    loantovalue: loantovalue,
    year: year
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed
  <br>
  <input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed
  <br>
  <input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed
  <br>
  <input type="checkbox" name="type" value="t9" id="t9" />Tracker
  <br>
  <input type="checkbox" name="type" value="t1" id="t1" checked/>All
  <br>
</section>

<section id="fee">
  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="f2" id="f2" />Fee
  <br>
  <input type="checkbox" name="fee" value="f3" id="f3" />No Fee
  <br>
  <input type="checkbox" name="fee" value="f1" id="f1" checked/>All
  <br>
</section>

<form name="repaymentcalc" id="myForm" action="">
  </br>
  <p>
    Home Value £
    <input type="number" id="homevalue" value="250000" style="width: 75px">
  </p>

  <p>
    Loan Amount £
    <input type="number" id="loanamount" value="200000" style="width: 75px">
  </p>

  Term
  <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px">

  <div id="years" style="display:inline-block;">25 years</div>

  <p>

    <div id="ltv">Loan to Value: 80.0%</div>

    </div>
</form>

<br>

<div id="mortgagediv">
  <table id="mortgagetable">
    <thead>
      <tr class="productheader">
        <th class="lender">Lender</th>
        <th class="type">Type</th>
        <th class="inititalrate">Initial Rate (%)</th>
        <th class="svr">SVR (%)</th>
        <th class="apr">Overall APR (%)</th>
        <th class="fee">Fee (£)</th>
        <th class="ltv">LTV (%)</th>
        <th class="repayment">Monthly Repayment (£)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t2">2yr Fixed</td>
        <td class="tg-031e">1.64</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">70</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t3">3yr Fixed</td>
        <td class="tg-031e">1.69</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">75</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t5">5yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t9">Tracker</td>
        <td class="tg-031e">1.64</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f3"></td>
        <td class="tg-031e">70</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t2">2yr Fixed</td>
        <td class="tg-031e">1.69</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">75</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t3">3yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t5">5yr Fixed</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
      <tr class="product">
        <td class="tg-031e">Nationwide</td>
        <td class="t1 t9">Tracker</td>
        <td class="tg-031e">1.79</td>
        <td class="tg-031e">3.99</td>
        <td class="tg-031e">3.40</td>
        <td class="f1 f2">999</td>
        <td class="tg-031e">80</td>
        <td class="tg-031e"></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我将这两个集合的逻辑合并到一个回调中。它既不优雅也不高效，但是有效。

$(document).ready(function() {
    $(":checkbox").click(function() {
        $("td").parent().hide();
        var selections = [];
        $(":checkbox:checked").each(function() {
          selections.push("."+$(this).val());
        });
        $(".product").each(function() {
            showRow = true;
            for(i=0; i<selections.length; i++){
                if (!$(this).children(selections[i]).length){
                    showRow = false;
                }
            }
            if (showRow) $(this).show();
        });
    });
  });

这是一个demo其中。