JS小实例笔记三——全选、反选、全不选及优化
首先要了解选中的三种形式
①.用户手动点击勾选
②.标签中写的checked
③.JS操作dom
图示如下:
创建文件demo.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>全选、反选、全不选</title>
</head>
<body>
<form action="">
<p><input type="checkbox" name="" id="">A</p>
<p><input type="checkbox" name="" id="">B</p>
<p><input type="checkbox" name="" id="">C</p>
<p><input type="checkbox" name="" id="">D</p>
</form>
<button>全选</button>
<button>反选</button>
<button>全不选</button>
</body>
</html>
<!--
选中的三种形式
①.用户手动点击勾选
②.标签中写的checked
③.JS操作dom -->
<script>
let button = document.getElementsByTagName('button');
let input = document.getElementsByTagName('input');
//全选
button[0].onclick = function() {
for (let i = 0; i < input.length; i++) {
input[i].checked = true;
}
};
//反选
button[1].onclick = function() {
for (let i = 0; i < input.length; i++) {
input[i].checked = !input[i].checked;
}
};
//全不选
button[2].onclick = function() {
for (let i = 0; i < input.length; i++) {
input[i].checked = false;
}
}
</script>
文件demo.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>全选、反选、全不选</title>
</head>
<body>
<form action="">
<p><input type="checkbox" name="" id="">A</p>
<p><input type="checkbox" name="" id="">B</p>
<p><input type="checkbox" name="" id="">C</p>
<p><input type="checkbox" name="" id="">D</p>
</form>
<button onclick="getAll(0)">全选</button>
<button onclick="getAll(1)">反选</button>
<button onclick="getAll(2)">全不选</button>
</body>
</html>
<!--
选中的三种形式
①.用户手动点击勾选
②.标签中写的checked
③.JS操作dom -->
<script>
let button = document.getElementsByTagName('button');
let input = document.getElementsByTagName('input');
//重复内容可以进行封装。这里封装为函数,进行优化
function getAll(num) {
for (let i = 0; i < input.length; i++) {
if (num == 0) {
input[i].checked = true;
} else if (num == 1) {
input[i].checked = !input[i].checked;
} else {
input[i].checked = false;
}
}
}
</script>