结果是检查多个复选框值并更新表数据
Multiple checkbox value checking and updated table data as a result
我需要编写一个脚本来处理两组复选框,其中脚本处理两个集合中的选项,并基于此显示/隐藏表数据行。
应该发生的情况是,每当更新任一复选框中的值时,都会筛选表行。每次从任一组中的选择发生更改时,保留的行都应遵循两组复选框的逻辑。
我真的很困惑你如何让两组一起工作,任何指示都会很棒吗?
<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>
相关文章:
- 更新数据,而不是用javascript和jquery将其添加到我的表中
- JQGrid使用服务器编辑后的更新数据刷新数据
- 使用odata 4的jaydata 1.5和保存/更新数据时的错误
- 使用引导时间选取器时,没有更新数据ng模型值
- AngularJS中超时后没有更新数据
- jQuery动态更新数据键和值
- 在简单的可重用 D3 图表中更新数据
- Node/Express 无法正确更新数据模型
- 如何在jQuery中的单个保存按钮上更新数据和添加数据
- 如何使用Jquery更新数据确认属性中的消息
- 更新数据后保留D3图的位置
- 使用$watch更新数据,ng重复不反映更改
- 在OpenCart中,我们如何实时更新数据
- 表单在每个页面中 - 仅在特定页面上处理它 - 如果当前不在页面上 - 重定向 - 否则 - 使用 AJAX 更新数据
- 调整窗口大小时更新数据属性
- Firebase赢得't更新数据
- Rails和jQuery-尝试使用setTimeout主动更新数据
- Lawnchair.js未更新数据
- 更新数据时的React.js生命周期
- enter() 和 exit() 如何检测 D3 中的更新数据