在
layui 中，如果要
实现多个
checkbox 的
全选/取消
全选功能，可以使用 `form` 模块的 `on` 方法，绑定 `
checkbox` 的点击事件，然后通过 `prop` 方法修改其他
checkbox 的选择状态。
示例代码如下：
HTML：
```
html
<div class="
layui-form-item">
<input type="
checkbox" name="checkAll" lay-skin="primary" title="
全选">
<div class="
layui-input-block">
<input type="
checkbox" name="like[1]" lay-skin="primary" title="
复选框1">
<input type="
checkbox" name="like[2]" lay-skin="primary" title="
复选框2">
<input type="
checkbox" name="like[3]" lay-skin="primary" title="
复选框3">
</div>
</div>
```
JavaScript：
```javascript
//监听
全选
form.on('
checkbox(checkAll)', function(data){
var child = $(data.elem).parents('.
layui-form').find('input[type="
checkbox"]');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('
checkbox');
});
//监听每个
复选框
form.on('
checkbox', function(data){
var child = $(data.elem).parents('.
layui-form').find('input[type="
checkbox"]');
var checkedChild = $(data.elem).parents('.
layui-form').find('input[type="
checkbox"]:checked');
if (checkedChild.length === child.length) {
$(data.elem).parents('.
layui-form').find('input[name="checkAll"]').prop('checked', true);
} else {
$(data.elem).parents('.
layui-form').find('input[name="checkAll"]').prop('checked', false);
}
form.render('
checkbox');
});
```
以上代码中，监听了
全选复选框和每个子
复选框的点击事件，通过 `prop` 方法修改其他
checkbox 的选择状态，最后通过 `form.render('
checkbox')` 方法重新渲染
checkbox，使其生效。
希望能对你有所帮助！
最低0.47元/天 解锁文章
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
