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

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

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>

Answer 2

如果检查了其中一个属性，则显示

行

＆＃13;

var $products = $("#mortgagetable tbody > tr");
$products.hide();
var checked_arr = [];
$("input[type='checkbox']").change(function() {
  var $self = $(this);
  var checked = $self.prop("checked");
  var obj = $self.attr("data-type");
  if(checked){
        checked_arr.push(obj);
  }
  else
  {
		var poped = checked_arr.indexOf(obj);
        checked_arr.splice(poped,1);
  }
  $products.each(function(){//get tr data-types
    var to_split = $(this).attr("data-type");
	var attrs = [];
	attrs = to_split.split(",");
	
    for(var i=0; i<attrs.length; i++){
	    if($self.attr("data-type") == attrs[i]){
			if(checked){//checked
			   $(this).show();
			   return;
			}
			else{
				var count = 0;
				$(attrs).each(function(){
					
					if(checked_arr.indexOf(this.toString()) > -1){ //unchecked and is not in 
						count++;						//checked attributes array
					}	
				});
				if(!count)
					$(this).hide();
			}
        }
	}
  });
});

＆＃13;

thead>tr{
    border-bottom: 1px solid black;
    display: inline-block;
}

td,th{
  width: 100px;
  display: inline-block;
}
th:nth-child(2n+1),td:nth-child(2n+1) {background: #CCC}{background-color: silver;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"  data-type="type2" />Type 2<br>
  <input type="checkbox" name="type" value="t3" id="t3" data-type="type3" />Type 3<br>
  <input type="checkbox" name="type" value="t5" id="t5" data-type="type5"  />Type 5<br>

</section>

<section id="fee">

  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" id="fee" data-type="fee" />Fee<br>
  <input type="checkbox" name="fee" value="nofee" id="nofee" data-type="nofee" />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" data-type="type2,fee"><td class="lender">Bank One<td class="t2">Type 2</td><td class="fee">1000</td></tr>
<tr class="product" data-type="type3,nofee"><td class="lender">Bank Two<td class="t3">Type 3</td><td class="nofee">None</td></tr>
<tr class="product" data-type="type5,nofee"><td class="lender">Bank Three<td class="t5">Type 5</td><td class="nofee">None</td></tr>

</tbody>

</table>

＆＃13;

结果是多个复选框值检查和更新的表数据

2 个答案: