今天做了一个功能，对复选框的全选全不选和子元素控制全选按钮的选择。可能有点绕口，我直接上截图和代码：
<!DOCTYPE html>
<html lang="en">
<script src="jquery.min.js"></script>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="checkbox" name="choose1" id="checkboxInput" />
<label for="checkboxInput">全选</label>
<div class="" id="main">
<input type="checkbox" name="choose" value="" />
<input type="checkbox" name="choose" value="" />
<input type="checkbox" name="choose" value="" />
</div>
<script type="text/javascript">
// 全选反选
$("#checkboxInput").on("change", function () {
if (this.checked) {
$("#main").find("input[name='choose']").prop("checked", true);
} else {
$("#main").find("input[name='choose']").prop("checked", false);
}
});
// 控制全选按钮是否被选中
$("#main input").on("change", function () {
var inputLength = $("#main input").length;
var checkedLength = $('[name=choose]:checked').length;
if (checkedLength == inputLength) {
$("#checkboxInput").prop("checked", true);
} else {
$("#checkboxInput").prop("checked", false);
}
});
</script>
</body>
</html>因为网上有很多类似的功能，所以我也参照了很多前辈们的代码。现在是能实现我工作中的需求的，希望能帮到有需要的朋友，如果写的有问题，也希望朋友能够指出来，一起进步。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。