网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选和反选功能。
HTML页面
使用input标签的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选和反选按钮。HTML实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS实现全选反选</title>
</head>
<body>
<div>
<h3>选择你喜欢的水果：</h3>
<input type="checkbox" name="fruit" >apple<br>
<input type="checkbox" name="fruit" >banana<br>
<input type="checkbox" name="fruit" >pear<br>
<input type="checkbox" name="fruit" >orange<br>
<input type="checkbox" name="fruit" >strawberry<br>
<input type="button" value="全选" > <input type="button" value="反选">
</div>
</body>
</html>
大概就是这么一个页面，没有CSS，元素比较单调，主要是要实现这么一个功能。
1648219738890.png
全选和反选
需要实现全选和反选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。 得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同 。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true 。
全选函数：
function setAll() {
var fruit = document.getElementsByName("fruit");
for (var i = 0; i < fruit.length; i++) {
fruit[i].checked = true;
}
}
反选函数：
function setOthers() {
var fruit = document.getElementsByName("fruit");
for (var i = 0; i < fruit.length; i++) {
if (fruit[i].checked == false)
fruit[i].checked = true;
else
fruit[i].checked = false;
}
}
如何使用
使用方法也是特别简单，将上面的函数添加到按钮的点击事件中即可，下面是整个示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS实现全选反选</title>
</head>
<body>
<div>
<h3>选择你喜欢的水果：</h3>
<input type="checkbox" name="fruit" >apple<br>
<input type="checkbox" name="fruit" >banana<br>
<input type="checkbox" name="fruit" >pear<br>
<input type="checkbox" name="fruit" >orange<br>
<input type="checkbox" name="fruit" >strawberry<br>
<input type="button" onclick="setAll()" value="全选" > <input type="button" onclick="setOthers()" value="反选">
</div>
</body>
<script>
function setAll() {
var fruit = document.getElementsByName("fruit");
for (var i = 0; i < fruit.length; i++) {
fruit[i].checked = true;
}
}
function setOthers() {
var fruit = document.getElementsByName("fruit");
for (var i = 0; i < fruit.length; i++) {
if (fruit[i].checked == false)
fruit[i].checked = true;
else
fruit[i].checked = false;
}
}
</script>
</html>
网友评论