复选框全选中，全不选中，反选按钮实现
dom对象的getElementByName()函数可以将相同名字的对象都放到一个集合中返回，
通过操作这个集合中元素（也是dom对象）的checked属性来实现全选等功能
以下为基础写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js测试</title>
<script >
//全选
var hobbies = document.getElementsByName("hobby");
function onclick1() {
for(var i=0;i<hobbies.length;i++)
hobbies[i].checked=true;
}
//全不选
function onclick2() {
for(var i=0;i<hobbies.length;i++)
hobbies[i].checked = false;
}
function onclick3() {
for(var i=0;i<hobbies.length;i++)
hobbies[i].checked = !hobbies[i].checked;
}
</script>
</head>
<body>
<!--复选框全选，全不选，反选-->
爱好：<input type>
<input type="checkbox" name="hobby" value="c"/>c
<input type="checkbox" name="hobby" value="c++"/>c++
<input type="checkbox" name="hobby" value="java"/>java
<br>
<button onclick="onclick1()">全选</button>
<button onclick="onclick2()">全不选</button>
<button onclick="onclick3()">反选</button>
</body>
</html>
以下为jQuery写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js测试</title>
<script type="text/javascript" src="static/script/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
/*
* jQuery写法
* */
$(function () {
//全选/全不选：要求点击这个复选框，下面三个全选，再次点击，下面三个全不选
$("#all").click(function () {
$("input[name='hobby']").prop("checked", this.checked);//this代表着调用这个function的dom对象，即'全选/全不选'这个复选框
});
//全选按钮
$("[name=btn1]").click(function () {
$(":checkbox").prop("checked", true);
})
//全不选按钮
$("[name=btn2]").click(function () {
$(":checkbox").prop("checked",false);
})
//反选按钮
$("[name=btn3]").click(function () {
$("[name=hobby]").each(function () {
this.checked=!this.checked;
})
/*检查是否满选
* */
//得到全部选项的数量
var checkedLength = $("[name=hobby]:checked").length;
//得到选中选项的数量
var AllLength = $("[name=hobby]").length;
//比较两个数量
$("#all").prop("checked",checkedLength==AllLength)
})
//提交按钮
$("[name=btn4]").click(function () {
$("[name=hobby]:checked").each(function () {
alert(this.value);
})
})
//有一个没选中，全选/全不选就取消选中
//为所有复选框绑定点击事件
$("[name=hobby]").click(function () {
var checkedLength = $("[name=hobby]:checked").length;
var AllLength = $("[name=hobby]").length;
$("#all").prop("checked",checkedLength==AllLength)
})
})
</script>
</head>
<body>
<!--复选框全选，全不选，反选-->
爱好：<input type="checkbox" name="checkbox" id="all">全选/全不选
<br>
<input type="checkbox" name="hobby" value="c" />c
<input type="checkbox" name="hobby" value="c++"/>c++
<input type="checkbox" name="hobby" value="java"/>java
<br>
<button name="btn1" value="全选">全选</button>
<button name="btn2" value="全不选">全不选</button>
<button name="btn3" value="反选" >反选</button>
<button name="btn4" value="提交">提交</button>
</body>
</html>
