javascript - 多复选框值检查和结果更新表数据

Question

我需要编写一个脚本来处理两组复选框，其中脚本处理来自两组的选项并基于此显示/隐藏表格数据行。

应该发生的是，每当您更新任一组复选框中的值时，您都会过滤表格行。每当任一组的选择发生变化时，剩余的行应遵循两组复选框的逻辑。

我真的很困惑如何让这两个集合一起工作，请给我任何建议？

<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/>Type 2<br>
  <input type="checkbox" name="type" value="t3" id="t3" checked/>Type 3<br>
  <input type="checkbox" name="type" value="t5" id="t5" checked/>Type 5<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">
    
<thead>

<tr class="producthd"><th class="lenderhd">Lender</th><th class="typehd">Type</th><th class="feehd">Fee (£)</th></tr>

</thead>

<tbody>

<tr class="product"><td class="lender">Bank One<td class="t2">Type 2</td><td class="fee">1000</td></tr>
<tr class="product"><td class="lender">Bank Two<td class="t3">Type 3</td><td class="nofee">None</td></tr>
<tr class="product"><td class="lender">Bank Three<td class="t5">Type 4</td><td class="nofee">None</td></tr>

</tbody>

</table>

</html>

Answer 1

我会通过动态生成表格来处理这个问题，当 radio 改变时，只需重新渲染它。

var lenders = [{
  name: "Bank 1",
  type: "Type 2",
  fee: 0
}, {
  name: "Bank 2",
  type: "Type 3",
  fee: 0
}, {
  name: "Bank 3",
  type: "Type 5",
  fee: 1000
}];

function renderLenders() {
  var types = $("input[name=type]:checked").map(function() {
    return $(this).val();
  }).get();
  var fees = $("input[name=fee]:checked").map(function() {
    return $(this).val();
  }).get();

  var l = lenders.filter(function(item, index, array) {
    return types.indexOf(item.type) != -1;
  });

  l = l.filter(function(item, index, array) {
    return (
      (
        item.fee > 0 &&
        fees.indexOf("fee") != -1
      ) ||
      (
        item.fee == 0 &&
        fees.indexOf("nofee") != -1
      )
    );
  });

  var rows = "";
  for (var i = 0; i < l.length; i++) {
    rows += "<tr><td>" + l[i].name + "</td><td>" + l[i].type + "</td><td>" + ((l[i].fee > 0) ? l[i].fee : "None") + "</td></tr>";
  }
  $("#lenders").html(rows);
}
$(function(){
  renderLenders();
  $("input[type=checkbox]").on("click", function(){
    renderLenders();
  });
})

table, td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="Type 2" checked/>Type 2<br>
  <input type="checkbox" name="type" value="Type 3" checked/>Type 3<br>
  <input type="checkbox" name="type" value="Type 5" checked/>Type 5<br>
</section>
<section id="fee">
  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" checked/>Fee<br>
  <input type="checkbox" name="fee" value="nofee" checked/>No Fee<br>
</section>
<table>
  <thead><tr><td>Lender</td><td>Type</td><td>Fee</td></tr></thead>
  <tbody id='lenders'></tbody>
</table>