最近项目中前台经常遇到如下需求：
1：用户勾选父类checkbox框，关联的子类checkbox框被自动勾选上
2：当子类的所有checkbox框全部被勾选，父类的checkbox也被勾选
这就是最普遍的checkbox级联勾选的问题
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-check-1.0.js"></script>
</head>
<body>
p：<input type="checkbox" check-group="genre"/><br>
c:<input type="checkbox" check-child="genre"/> <input type="checkbox" check-child="genre"/> <input type="checkbox" check-child="genre"/> <br>
p：<input type="checkbox" check-group="genre1"/><br>
c:<input type="checkbox" check-child="genre1"/> <input type="checkbox" check-child="genre1"/> <input type="checkbox" check-child="genre1"/>
</body>
</html>
jquery-check-1.0.js
/**
*checkbox框全选1.0版，基于jQuery
* 适用浏览器IE8，9，10，11 firefox chrome
* 适用方法 页面父checkbox添加属性check-group，其子类checkbox框增加属性check-child
* 两个属性的值相等即可完成级联关联
*/
$(function() {
$(":input[check-group]").each(function() {
var checkbox = $(this);
pName = checkbox["0"].attributes["check-group"].value;
plugin(pName);
});
});
var plugin = function(team) {
$(":input[check-group=" + team + "]").click(function() {
checkAll(team);
});
$(":input[check-child=" + team + "]").click(function() {
checkparent(team);
});
};
function checkAll(team) {
var pName;
var pcheck;
$(":input[check-group=" + team + "]").each(function() {
var checkbox = $(this);
pName = checkbox["0"].attributes["check-group"].value;
pcheck = checkbox["0"].checked;
});
$(":input[check-child=" + team + "]").each(function() {
var checkbox = $(this);
var childName = checkbox["0"].attributes["check-child"].value;
if (pName == childName) {
if (pcheck == true)
checkbox["0"].checked = true;
else
checkbox["0"].checked = false;
}
});
};
function checkparent(team) {
var total = $(":input[check-child=" + team + "]").length;
var checkedSize = 0;
var childName;
$(":input[check-child=" + team + "]").each(function() {
var checkbox = $(this);
childName = checkbox["0"].attributes["check-child"].value;
if (checkbox["0"].checked == true) {
checkedSize++;
}
});
if (checkedSize == total) {
$(":input[check-group=" + childName + "]")[0].checked = true;
} else {
$(":input[check-group=" + childName + "]")[0].checked = false;
}
};
希望有大神改进或者提供更好的解决方案~
相关推荐
在网页开发中，jQuery 是一个广泛使用...通过以上介绍，我们可以利用 jQuery 实现复选框的全选、反选和全不选功能，同时结合表单验证插件，确保用户按照规定进行输入。在实际应用中，可以根据具体需求进行调整和优化。
此外，插件可能还包括一些自定义事件，如`onCheckAll`和`onUncheckAll`，允许开发者在全选或反选发生时执行额外的逻辑。 在HTML中，通常会有一个主复选框，它的`id`或`class`会被用作插件的触发器。例如，`...
这个“模拟select带checkbox全选反选取消插件”是一个专门为了解决这个问题而设计的工具。它允许用户通过复选框（checkbox）进行多选操作，并提供了全选、反选和取消选择的功能，极大地方便了用户交互。 首先，让...
标题中的“小测试：jquery的全选插件”暗示了我们即将探讨的是一个基于jQuery的全选功能实现，这在Web开发中非常常见，尤其是在处理表格或者多选列表时。全选插件允许用户一键选择所有选项，提高用户体验。jQuery是...
这个“基于jQuery实现的全选、反选复选框插件源码例子”是一个很好的学习资源，可以帮助开发者理解如何利用jQuery来操控DOM（Document Object Model）中的复选框，并实现全选与反选的功能。 首先，我们要了解jQuery...
在网页开发中，jQuery DataTables 是一款非常流行的插件，用于创建交互式、功能丰富的数据表格。然而，当在一个页面中使用多个 DataTables 实例时，可能会遇到全选复选框（checkbox）行为异常的问题。这个问题主要是...
本项目是基于jQuery和layui插件制作的checkbox复选框选中代码，非常适合那些需要在网页上实现复选框功能的开发者。 首先，`index.html`是项目的主页面文件，它包含了HTML结构和引用的外部资源。在HTML中，你需要...
总结一下，这个jQuery全选框实践代码提供了一种便捷的方法来实现全选、查看选中项的ID、值或自定义属性值的功能。它通过扩展jQuery对象，创建了一个可重用的插件，适用于具有类似结构的多复选框场景。在实际开发中，...
在本文中，我们将深入探讨如何使用jQuery插件来实现表格中的行高亮显示以及全选、反选功能。这个插件特别适用于数据展示和交互性强的网页应用，它提供了四种不同的工作模式，使得用户可以更加方便地管理和操作表格...
3. **自定义样式**：Bootstrap 提供了丰富的主题和插件，可以定制select的样式，使其更符合设计需求。 4. **响应式设计**：确保在不同设备和屏幕尺寸上，select复选框都能正常工作。 总结，Bootstrap中的select复选...
本文将深入探讨`.prop()`方法，特别是它在实现表格行全选与反选中的应用，同时还会涉及到`jquery.tableCheckbox.js`这个插件。 首先，`.prop()`方法是用来处理元素的属性（properties），如`checked`、`selected`或...
- jQuery扩展技巧总结：分享一些jQuery的高级使用技巧，如自定义插件开发、利用事件委托优化事件处理等。 - jQuery常见经典特效汇总：总结了一些常见的jQuery特效，比如淡入淡出、滑动切换等，这些特效可以提升页面...
**jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件，它针对HTML的`<select>`元素提供了增强的多选功能。这个控件设计得更加直观且用户友好，使得用户在网页应用中进行多选操作时能有更佳的体验。它...
当按钮被点击时，我们改变按钮的值（全选/反选），并调用一个自定义的 jQuery 插件 `checkCbx` 来切换所有复选框的状态： ```javascript $("#btnOk").click(function(){ this.value = this.value == "全选"?"反选...
5. **自定义插件**： 从文件名"132677929074437710"推断，这可能是插件的核心代码。自定义jQuery插件通常以`.fn.extend()`来扩展jQuery对象，提供新的方法。插件可能封装了上述的复选框绑定、状态同步、批量操作等...
文章中提到的jQuery插件“jquery.selectall.js”是一个自定义的jQuery扩展，用于简化全选功能的实现。这个插件通过jQuery的“fn”对象添加了两个方法：selectall和delselect。其中，selectall方法用于绑定点击事件，...
- **全选/全不选**：提供一个“全选”和“全不选”的按钮，方便用户快速选择所有或取消所有选项。 - **搜索功能**：在大量选项时，增加搜索输入框，帮助用户快速定位到想要的选项。 - **分组选项**：对选项进行...
4. 使用CSS来实现半选中和全选中的视觉效果，这可能包括额外的类名或者自定义样式。 此外，为了保持数据与界面的一致性，还需要考虑异步加载数据的情况。例如，当树的某些部分需要动态加载时，可能需要使用Ajax请求...
在上述描述中，提到了关键的JQuery代码片段，即`$(':checkbox[data-check-target]').click(function() {...})`，这表示监听了带有`data-check-target`自定义属性的复选框点击事件。通过这种方式，我们可以实现当全选...