在本文中，我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框，包括权限范围的多选、单选以及全选操作。同时，我们也将关注于父级和子级复选框之间的联动关系，即父级选中时子级全部选中，而子级未全选时父级取消选中。以下将详细阐述这个过程。
layui是一款优秀的前端UI框架，它提供了丰富的组件和模块，使得开发者能够快速构建美观且响应式的网页。jQuery则是一款广泛使用的JavaScript库，用于简化DOM操作、事件处理和动画效果。
1. **全选/反选功能**：
要实现全选和反选功能，我们可以添加两个按钮，分别绑定`click`事件。在事件处理函数中，我们可以使用jQuery的`prop()`方法来设置所有checkbox的`checked`属性。例如，全选的代码可能如下：
```javascript
$("#selectAll").click(function() {
$("input[type='checkbox']").prop("checked", true);
});
$("#deselectAll").click(function() {
$("input[type='checkbox']").prop("checked", false);
});
```
2. **多选/单选**：
对于多选和单选，可以使用`name`属性将相关的checkbox分组。同名的checkbox会形成一个选择组，用户只能选择其中的一个。例如：
```html
<input type="checkbox" name="selectGroup" value="option1">
<input type="checkbox" name="selectGroup" value="option2">
```
3. **父子级复选框联动**：
父子级复选框的联动需要我们跟踪每个父级复选框与其子级的关系。可以通过数据属性或类名来标识这种关系。当父级复选框被选中时，遍历其子级并设置它们为选中状态；反之，如果所有子级未被选中，父级复选框则自动取消选中。这可以通过递归函数实现，如下：
```javascript
function toggleParentCheckboxes(checkbox) {
var parent = checkbox.parents(".parentCheckbox");
if (parent.length > 0 && !parent.find(":checked").length) {
parent.prop("checked", false);
toggleParentCheckboxes(parent);
}
}
$("input[type='checkbox']").on("change", function() {
var children = $(this).siblings(".childCheckbox");
if ($(this).hasClass("parentCheckbox")) {
children.prop("checked", this.checked);
toggleParentCheckboxes(this);
} else {
var parent = $(this).parents(".parentCheckbox");
if (!this.checked && parent.length > 0) {
parent.prop("checked", false);
toggleParentCheckboxes(parent);
}
}
});
```
4. **CSS样式和layui集成**：
layui的`css`和`font`文件包含了一些预定义的样式，可以用来美化checkbox。在`index.html`中引入这些文件后，你可以通过layui的类名来定制样式。例如，`layui-form-checkbox`是layui的复选框样式，可以结合其他CSS选择器进行调整。
5. **HTML结构**：
在HTML结构中，每个父级复选框应该有一个唯一的ID，子级复选框可以通过`data-parent`属性关联到父级。例如：
```html
<div class="parentCheckbox" id="parent1">
<input type="checkbox" class="layui-form-checkbox" lay-skin="primary" id="parent1-check">
父级1
<div>
<input type="checkbox" class="layui-form-checkbox childCheckbox" data-parent="parent1">
子级1.1
</div>
...
</div>
```
jQuery和layui结合使用可以创建出功能强大的复选框系统，满足多选、单选、全选及父子级联动的需求。在实际项目中，根据具体需求进行适当的调整，可以大大提高用户体验和交互性。在提供的`index.html`、`layui.js`等文件中，你应该能找到具体的实现代码示例。
jQuery基于layui插件制作checkbox复选框选中代码.zip （14个子文件） 
index.html 4KB
lay 
form.js 9KB
