<!-- 实现全选,反选,不选
1. 获取若干个checkbox和3个button按钮
2. 在3个button按钮中添加onclick事件
3. checkbox选择:checked = "true"(checked = "checked"可不可以?)
4. 全选:选择所有checkbox,将其值设置为checked = "true"
5. 不选:选择所有checkbox,将其值设置为checked = "false"
6. 反选:手动check某些checkbox,使用if判断语句:
if(checked == "true"){
checked = "false"
}
else{
checked = "true"
} -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var oallCheck = document.getElementById("allCheck");
var onoCheck = document.getElementById("noCheck");
var oreverseCheck = document.getElementById("reverseCheck");
var ochooseBox = document.getElementById("chooseBox");
var obox = ochooseBox.getElementsByTagName("input");
oallCheck.onclick = function () {
//console.log(obox[1].checked);
for (var i = 0; i < obox.length; i++) {
// obox[i].checked = true;
obox[i].checked = "checked";
}
}
onoCheck.onclick = function () {
for (var i = 0; i < obox.length; i++) {
//不能写"false"
// obox[i].checked = false;
obox[i].checked = "";
}
}
oreverseCheck.onclick = function () {
for (var i = 0; i < obox.length; i++) {
if (obox[i].checked == true) {
obox[i].checked = false
}
else {
obox[i].checked = true
}
}
}
}
</script>
</head>
<body>
<button id="allCheck">全选</button>
<button id="noCheck">不选</button>
<button id="reverseCheck">反选</button><br>
<div id="chooseBox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>
</html>
实现全选,反选,不选
最新推荐文章于 2020-10-22 00:49:18 发布