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

最新推荐文章于 2019-09-17 10:52:14 发布

原创最新推荐文章于 2019-09-17 10:52:14 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #checkbox #.prop

web 专栏收录该内容

6 篇文章

订阅专栏

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

处理的表格类似如下：要实现勾选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，不能有引号。
}
}
}
}
});