### form.on('checkbox(filter)', callback) 的用途和用法 `form.on('checkbox(filter)', callback)` 是 `layui` 框架中用于监听复选框（checkbox）事件的 API。通过此方法，可以捕获用户对复选框的操作，并在回调函数中执行自定义逻辑。 #### 1. 基本语法 ```javascript form.on('checkbox(filter)', callback); ``` - **event**: 表示事件类型，这里是 `checkbox`。 - **filter**: 用于筛选特定的复选框，通常对应复选框的 `lay-filter` 属性值。 - **callback**: 当事件触发时执行的回调函数，接收一个参数 `data`，包含以下属性： - `data.elem`: 原始 DOM 对象。 - `data.elem.checked`: 是否被选中，返回布尔值 `true` 或 `false`[^4]。 - `data.value`: 复选框的值，可以通过 `data.elem.value` 获取相同结果。 - `data.othis`: 美化后的 DOM 对象。 #### 2. 实际应用场景 以下是 `form.on('checkbox(filter)', callback)` 的实际应用场景及代码示例： ##### 场景 1: 监听单个复选框的状态变化 当需要监听某个特定复选框的状态变化时，可以通过为其设置唯一的 `lay-filter` 属性值来实现。 ```html <input type="checkbox" name="agree" lay-filter="agreeCheckbox" title="我同意"> ``` ```javascript layui.use(['form'], function() { var form = layui.form; form.on('checkbox(agreeCheckbox)', function(data) { if (data.elem.checked) { console.log("用户同意了条款"); } else { console.log("用户取消了同意"); } }); }); ``` ##### 场景 2: 批量处理多个复选框 当页面中有多个复选框需要统一处理时，可以使用相同的 `lay-filter` 值。 ```html <input type="checkbox" name="item" lay-filter="itemCheckbox" title="选项1"> <input type="checkbox" name="item" lay-filter="itemCheckbox" title="选项2"> <input type="checkbox" name="item" lay-filter="itemCheckbox" title="选项3"> ``` ```javascript layui.use(['form'], function() { var form = layui.form; form.on('checkbox(itemCheckbox)', function(data) { console.log("选项状态改变：" + data.elem.title + " -> " + data.elem.checked); }); }); ``` ##### 场景 3: 动态生成复选框并绑定事件 在动态生成复选框的情况下，需要调用 `form.render()` 方法重新渲染表单元素，以确保事件监听器生效。 ```javascript layui.use(['form'], function() { var form = layui.form; // 动态添加复选框 var checkboxHtml = '<input type="checkbox" name="dynamic" lay-filter="dynamicCheckbox" title="动态选项">'; document.getElementById('container').innerHTML += checkboxHtml; form.render(); // 重新渲染表单 form.on('checkbox(dynamicCheckbox)', function(data) { console.log("动态复选框状态：" + data.elem.checked); }); }); ``` #### 3. 注意事项 - 如果未为复选框设置 `lay-filter` 属性，则无法通过 `form.on()` 方法监听其事件[^2]。 - 在动态生成复选框后，必须调用 `form.render()` 方法，否则事件监听器可能无效[^3]。 - 回调函数中的 `data.elem.checked` 可用于判断复选框的当前状态，`true` 表示选中，`false` 表示未选中[^4]。 --- ###