### 如何在表单中使用 Checkbox 过滤器并绑定回调函数 在使用 `layui` 框架时，可以通过 `form.on()` 方法监听表单中的事件（如 checkbox 的选中或取消选中），并绑定相应的回调函数。以下是一个完整的示例[^3]： #### HTML 示例代码 ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="写作" lay-filter="writingCheckbox"> <input type="checkbox" name="like[read]" title="阅读" lay-filter="readingCheckbox"> </div> </div> </form> ``` #### JavaScript 示例代码 ```javascript layui.use(['form'], function() { var form = layui.form; // 监听写作 checkbox 的变化 form.on('checkbox(writingCheckbox)', function(data) { console.log("写作 checkbox 状态改变"); if (data.elem.checked) { console.log("写作被选中"); } else { console.log("写作被取消选中"); } }); // 监听阅读 checkbox 的变化 form.on('checkbox(readingCheckbox)', function(data) { console.log("阅读 checkbox 状态改变"); if (data.elem.checked) { console.log("阅读被选中"); } else { console.log("阅读被取消选中"); } }); }); ``` 上述代码展示了如何通过 `lay-filter` 属性为每个 checkbox 设置唯一的过滤器名称，并通过 `form.on()` 方法绑定回调函数[^3]。 #### 注意事项 - `lay-filter` 是 `layui` 提供的属性，用于标识特定的元素，便于事件监听[^3]。 - `form.on()` 方法的第一个参数是事件类型和过滤器名称的组合，例如 `checkbox(writingCheckbox)` 表示监听具有 `writingCheckbox` 过滤器的 checkbox 的变化[^3]。 - 在回调函数中，可以通过 `data.elem.checked` 判断当前 checkbox 的状态（选中或未选中）[^3]。 ---