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

Multiple checkbox value checking and updated table data as a result

本文关键字:更新 数据 复选框 检查 结果是      更新时间:2023-09-26

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

应该发生的情况是,每当更新任一复选框中的值时,都会筛选表行。每次从任一组中的选择发生更改时,保留的行都应遵循两组复选框的逻辑。

我真的很困惑你如何让两组一起工作,任何指示都会很棒吗?

<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>

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

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>

如果选中其中一个属性,则显示行

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