jquery grid表格checkbox的关联勾选与取消

AndroidEric

于 2016-08-19 15:15:35 发布

阅读量3.9k

点赞数

分类专栏： web 文章标签： jquery checkbox .prop

本文链接：https://blog.youkuaiyun.com/AndroidEric/article/details/52251173

版权

web 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在jQuery Grid中实现表格checkbox的关联勾选与取消。当选择A小计的checkbox时，其对应的A项也会被自动勾选。通过监听checkbox的change事件，获取选中行的ID，并遍历所有行来设置其他相关行的选中状态。代码中使用了`data-grid`插件的方法和`.prop()`属性来处理checkbox的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

处理的表格类似如下：要实现勾选A小计时，A也勾上。

序号	名称	隐藏id	勾选框
-10	A小计	10
-12	B小计	12
1456	A	10
1567	B	12
1777	B	12

代码如下：

$("#aaaaContainer input[type=checkbox]").on("change",function(){
var main = $('#aaaaContainer .widget-body .id-table'); //找到表格区域
var grid_data=main.data('grid');
var box1 = grid_data.getdetailbycheck("p_id",-1).split(";"); //p_id为序号id,为-1时全选，为1时选打勾的。将p_id放入数组
var box2 = grid_data.getdetailbycheck("c_id",-1).split(";"); //将隐藏id放入数组
for(var i=0;i<box1.length;i++){
var a1 = box1[i];
if(a1<0){ //判断是否含-，含有即为小计
var attr = main.find('tr').eq(i).find('td').eq(0).find('input').prop('checked'); //判断选择行的勾选状态
for(var j=0;j<box2.length;j++){
var b1 = box2[j];
if(a1 == -b1){
main.find('tr').eq(j).find('td').eq(0).find('input').prop('checked',attr); //将状态赋值给隐藏id相同的行，注意状态为true或false，不能有引号。
}
}
}
}
});