### 解决复选框功能问题并结合 `layui form.on('checkbox(filter)', callback)` 的使用方法 在使用 `layui` 框架时，可以通过 `form.on('checkbox(filter)', callback)` 方法监听复选框的点击事件，并结合自定义逻辑（如 `selectAll` 函数）实现更复杂的功能。以下是详细说明和代码示例。 #### 1. 监听复选框事件 `layui` 提供了 `form.on('checkbox(filter)', callback)` 方法来监听复选框的变化。通过设置过滤器参数（filter），可以针对特定的复选框组进行操作。例如： ```javascript layui.use(['form'], function() { var form = layui.form; // 监听全选复选框的点击事件 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'); // 重新渲染复选框以更新样式 }); }); ``` 上述代码中，`selectAll` 复选框的点击事件会同步所有子复选框的状态[^1]。同时，当用户单独勾选或取消勾选某个子复选框时，会动态更新全选复选框的状态[^2]。 #### 2. 自定义逻辑与 `selectAll` 函数结合 为了确保 `selectAll` 函数能够正确运行，需要将 `layui` 的事件监听机制与现有的逻辑结合起来。以下是一个改进版的 `selectAll` 函数： ```javascript function selectAll() { var dev = $(".zone-box").find("div"); let all = 0; dev.each(function(index, e) { if ($(e).hasClass('zone-select')) { // 略过已选择的项 } else if ($(e).hasClass('zone-online')) { all = 1; // 标记存在可选中的项 } }); if (all === 1) { dev.each(function(index, e) { if ($(e).hasClass('zone-online')) { $(e).addClass('zone-select'); $(e).find('input[type="checkbox"]').prop('checked', true); // 设置复选框为选中状态 } }); } else { dev.each(function(index, e) { if ($(e).hasClass('zone-select')) { $(e).removeClass('zone-select'); $(e).find('input[type="checkbox"]').prop('checked', false); // 设置复选框为未选中状态 } }); } $('.zone-select-value').text($(".zone-box").find('.zone-select').length); // 更新选中数量显示 if (isShowGroup()) groupSelectAll(); // 调用分组全选逻辑 } ``` 上述代码中，`selectAll` 函数不仅更新了类名 `zone-select`，还同步了复选框的状态，并确保 `layui` 的样式能够正确渲染[^3]。 #### 3. 初始化表单组件 在使用 `layui` 的表单组件时，需要确保初始化操作已完成。以下是一个完整的初始化示例： ```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'); }); }); ``` #### 4. 注意事项 - 确保 `layui` 的 CSS 和 JS 文件已正确加载。 - 使用 `form.render()` 方法重新渲染表单组件，以确保样式和状态同步。 - 如果复选框的结构较为复杂，建议使用唯一的 `id` 或 `class` 来区分不同的复选框组[^4]。 ###