js基础——复选框中的全选、反选和全不选_复选命令可以不选吗-优快云博客

本文档提供了一个简单的HTML页面示例，展示了如何使用JavaScript来实现网页上的复选框全选、全不选及反选的功能。通过按钮点击事件触发相应的函数，可以方便地控制一组复选框的状态。

<!DOCTYPE html>
<html>
<head>
<title>select</title>
<meta charset="utf-8">
<script type="text/javascript">

//全选全不选循环让每一个复选框加上 checked 属性全不选就是取消checked属性
// 参数是用户传过来如果参数是true 说明全选如果false 全不选
function selectAll(status){
for (var i = 1; i <= 6; i++) {
//alert(document.getElementById('num'+i).value);
document.getElementById('num'+i).checked = status;
}
}
//反选看之前是否选上如果选中就取消选中反之选中
function selectReverse(){
//获取所有的选择框
for (var i = 1; i <= 6; i++) {
//alert(document.getElementById('num'+i).value);
var status = document.getElementById('num'+i);
if (status.checked) {
status.checked = false;
}else{
status.checked = true;
}
}
}

</script>
</head>
<body>
<ul>
<li><input type="checkbox" name="hobby" id="num1" value="1">养猫</li>
<li><input type="checkbox" name="hobby" id="num2" value="2">养狗</li>
<li><input type="checkbox" name="hobby" id="num3" value="3">足球</li>
<li><input type="checkbox" name="hobby" id="num4" value="4">篮球</li>
<li><input type="checkbox" name="hobby" id="num5" value="5">乒乓</li>
<li><input type="checkbox" name="hobby" id="num6" value="6">相声</li>
</ul>
<button onclick="selectAll(true)">全选</button>
<button onclick="selectAll(false)">全不选</button>
<button onclick="selectReverse()">反选</button>

</body>
</html>