全选/全不选/反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
选择运动项目
<label>
<input type="checkbox" name="sport" value="score" checked>⚽
<input type="checkbox" name="sport" value="pp">🏓
<input type="checkbox" name="sport" value="score">🎱
</label>
<br>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
<script type="text/javascript">
function selectAll() {
let sports = document.getElementsByName("sport");
for (let i = 0; i < sports.length; i++) {
sports[i].checked = true;
}
}
function selectNone() {
let sports = document.getElementsByName("sport");
for (let i = 0; i < sports.length; i++) {
sports[i].checked = false;
}
}
function selectReverse() {
let sports = document.getElementsByName("sport");
for (let i = 0; i < sports.length; i++) {
sports[i].checked = !sports[i].checked;
}
}
</script>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f0140048a7412c87236873cf07e58a3f.png#pic_center)