[英]Hide record within a table when checkbox is checked
I am trying to hide/show records in a table depending on a checkbox checked status 我试图根据复选框的选中状态隐藏/显示表中的记录
HTML HTML
<label>Add Additional Once off</label>
<input type="checkbox" id="chkAdditionalOnceoff" onChange="display();"value="0"><br>
<label>Add Additional Monthly</label>
<input type="checkbox" id="chkAdditionalMonthly" onChange="display();"value="0">
<table>
<div id="AdditionalOnceoff" style="display:none">
<tr><td><input type="text" id="txtField1"></td>
<td><input type="text" id="txtField2"></td>
</tr>
</div>
<tr><td colspan="2">Normal Record to Display always</td></tr>
<div id="AdditionalMonthly" style="display:none">
<tr>
<td><input type="text" id="txtField3"></td>
<td><input type="text" id="txtField4"></td>
</tr>
</div>
</table>
JAVASCRIPT JAVASCRIPT
function display(){
if (document.getElementById("chkAdditionalOnceoff").checked) {
document.getElementById("AdditionalOnceoff").style.display = "inline";
} else {
document.getElementById("AdditionalOnceoff").style.display = "none";
}
if (document.getElementById("chkAdditionalMonthly").checked) {
document.getElementById("AdditionalMonthly").style.display = "inline";
} else {
document.getElementById("AdditionalMonthly").style.display = "none";
}
}
So when the checkbox gets checked the corresponding < div > containing the records should be hide / displayed 因此,当复选框被选中时,包含记录的相应<div>应该被隐藏/显示
I have found this discussion Hiding other rows in a table when checkbox is selected but cannot find a working example of my scenario. 我发现该讨论选中了复选框时隐藏了表中的其他行,但找不到我的方案的有效示例。
hope so you will find solutions from here 希望如此,您将在这里找到解决方案
$(document).ready(function(){ $('input[type="checkbox"]').click(function(){ var inputValue = $(this).attr("value"); $("." + inputValue).toggle(); }); });
.box{ color: #fff; padding: 20px; display: none; margin-top: 20px; } .red{ background: #ff0000; } .green{ background: #228B22; } .blue{ background: #0000ff; } label{ margin-right: 15px; }
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <label><input type="checkbox" name="colorCheckbox" value="red"> red</label> <label><input type="checkbox" name="colorCheckbox" value="green"> green</label> <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label> </div> <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.