声明：文章转载链接出自：JavaScript 实现全选、全不选和反选功能_js全选和全不选代码_梁辰兴的博客-CSDN博客
使用input标签的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。HTML实现代码如下：
界面展示
二，解决思路
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。 得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同 。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true 。
// 全选
function setAll() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
hb[i].checked = true;
}
}
// 全不选
function unsetAll() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
hb[i].checked = false;
}
}
// 反选
function setOthers() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
if (hb[i].checked == false)
hb[i].checked = true;
else
hb[i].checked = false;
}
}
将上面的函数添加到按钮的点击事件中即可，最终附上源码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul style="list-style: none;">
<span>选择爱好</span>
<li><input type="checkbox" name="hb" />爬山</li>
<li><input type="checkbox" name="hb" />游泳</li>
<li><input type="checkbox" name="hb" />攀岩</li>
<li><input type="checkbox" name="hb" />冲浪</li>
<li><input type="checkbox" name="hb" />说唱</li>
</ul>
<input type="button" onclick="setAll()" value="全选" id="qx" />
<input type="button" onclick="unsetAll()" value="全不选" id="qbx" />
<input type="button" onclick="setOthers()" value="反选" id="fx" />
</body>
<script>
// 全选
function setAll() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
hb[i].checked = true;
}
}
// 全不选
function unsetAll() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
hb[i].checked = false;
}
}
// 反选
function setOthers() {
var hb = document.getElementsByName("hb");
for (var i = 0; i < hb.length; i++) {
if (hb[i].checked == false)
hb[i].checked = true;
else
hb[i].checked = false;
}
}
</script>
</html>
运行效果
