### 使用 `form.on('checkbox(filter)', callback)` 事件的详细说明 `layui` 提供了强大的表单事件监听功能，其中 `form.on('checkbox(filter)', callback)` 方法用于监听复选框的点击事件。以下是该方法的具体用法和注意事项。 #### 方法签名 ```javascript form.on('checkbox(filter)', function(data) { // 回调函数逻辑 }); ``` - **filter**：通过复选框的 `lay-filter` 属性指定的过滤器名称。 - **data**：事件触发时传递的数据对象，包含以下属性： - `elem`：原始 DOM 对象[^1]。 - `elem.checked`：当前复选框是否被选中，返回布尔值 `true` 或 `false`[^1]。 - `value`：复选框的 `value` 值，也可以通过 `data.elem.value` 获取[^1]。 - `othis`：美化后的 DOM 对象[^1]。 #### 示例代码 以下是一个完整的示例，展示如何使用 `form.on('checkbox(filter)', callback)` 方法监听复选框事件： ```javascript layui.use(['form'], function() { var form = layui.form; // 初始化表单组件 form.render(); // 监听复选框事件 form.on('checkbox(itemFilter)', function(data) { console.log(data.elem); // 原始 DOM 对象 console.log(data.elem.checked); // 是否被选中 console.log(data.value); // 复选框的 value 值 console.log(data.othis); // 美化后的 DOM 对象 }); }); ``` 在 HTML 中，确保为复选框添加了正确的 `lay-filter` 属性： ```html <input type="checkbox" name="item" lay-skin="primary" lay-filter="itemFilter"> ``` #### 动态生成复选框 如果复选框是动态生成的，则需要在生成后手动调用 `form.render()` 方法以确保事件能够正常监听[^3]。 ```javascript // 动态添加复选框 var newCheckbox = '<input type="checkbox" name="dynamicItem" lay-skin="primary" lay-filter="itemFilter">'; $('.container').append(newCheckbox); // 重新渲染表单组件 layui.form.render(); ``` #### 全选逻辑实现 结合 `form.on('checkbox(filter)', callback)` 方法，可以轻松实现全选功能。以下是一个示例： ```javascript layui.use(['form'], function() { var form = layui.form; // 初始化表单组件 form.render(); // 监听全选复选框事件 form.on('checkbox(selectAll)', function(data) { var isChecked = data.elem.checked; $('.zone-box').find("div").each(function(index, e) { if ($(e).hasClass('zone-online')) { $(e).find('input[type="checkbox"]').prop('checked', isChecked); } }); form.render('checkbox'); // 重新渲染复选框以更新样式 }); // 监听普通复选框事件 form.on('checkbox(item)', function(data) { var allChecked = $('.zone-box').find('.zone-online input[type="checkbox"]:checked').length === $('.zone-box').find('.zone-online input[type="checkbox"]').length; $('.select-all').prop('checked', allChecked); form.render('checkbox'); // 重新渲染复选框以更新样式 }); }); ``` --- ###