Jquery:如何在隐藏字段中保持复选框复选/取消检查状态
Jquery:如何在隐藏字段中保持复选框复选/取消检查状态
提问于 2018-08-26 09:34:11
我有一个html表，我有很多复选框。当用户单击标题复选框时，所有子复选框都将被选中，并根据标头复选框复选框状态取消选中。
用户也可以取消选中和选中任何子复选框。我要将子复选框值存储在用逗号分隔的隐藏字段中。当选中子复选框时，复选框值将存储在hiiden字段中，但如果该复选框值存储在hiiden字段中，则不会存储在隐藏字段中。
当用户取消选中任何人时，该复选框值将从隐藏字段中移除。
我试过这样做，但没有成功。所以，请指导我如何实现它。我的代码如下
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">
$(document).ready(function(){
$('#chckHead').click(function () {
$(".chcktbl").prop('checked', $(this).prop("checked"));
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function (index, obj) {
alert('pop');
if (this.checked === true) {
values.push($(this).val());
}
});
});
alert(values.toString());
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-26 10:19:43
您忘记将复选框值分配给隐藏的input，而且还必须在标头复选框事件侦听器中这样做。
$(document).ready(function() {
var hidden = $('#hidden');
$('#chckHead').click(function() {
var state = $(this).prop('checked');
if(state === false) {
hidden.val('');
}
var vals = [];
$('.chcktbl').each(function() {
$(this).prop('checked', state);
if(this.checked === true) {
vals.push($(this).val());
}
});
hidden.val(vals.toString());
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function(index, obj) {
if(this.checked === true) {
values.push($(this).val());
}
});
hidden.val(values.toString());
});
});<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id="chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="101" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="102" />
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="103" />
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.-->
<input id="hidden" type="text" name="hidden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
希望我把你推得更远了。
Stack Overflow用户
发布于 2018-08-26 10:32:24
您应该能够使用此选择器获得所有复选框：
$('input[type=checkbox]:checked')然后，您可以调用map获取所有ids并加入它们。
string = $('input[type=checkbox]:checked').map(function(idx,element) {
return element.value;
}).join(',')然后，只需侦听所有复选框的onChange事件，并设置隐藏字段的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52028719
复制
相似问题
R树状图指定树状图中的RGB颜色
无法渲染树状结构的角度？
树状图中的簇标签
HAC:树状图中的儿童
树状图中连接的节点数
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
