构思
通过for循环和for in循环来实现,界面效果如下
步骤
全选:
循环给所有的表单设置checked
反选:
循环内判断checked是否为true,如果为true则改为false否则改为true
获取值:
最开始用for取,但是只打印最后一个,然后就放弃直接使用for in 来取值,后面有时间再思考这个。如果有更好的方法,您可以在评论区留下。
代码语言:javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<div id="check">
<input type="checkbox" value="A">A <br>
<input type="checkbox" value="B">B <br>
<input type="checkbox" value="C">C <br>
<input type="checkbox" value="D">D <br>
<input type="checkbox" value="E">E <br>
</div>
<br><br>
<input type="button" onclick="checkAll();" value="全选">
<input type="button" onclick="checkRev()" value="反选">
<input type="button" onclick="getAll()" value="获取">
</body>
<script>
var oCheck = document.getElementById('check');
var oInput = oCheck.getElementsByTagName('input');
// 全选
function checkAll(){
for (var i = 0; i < oInput.length; i ) {
oInput[i].checked = true;
}
}
// 反选
function checkRev(){
for (var i = 0; i < oInput.length; i ) {
if (oInput[i].checked) {
oInput[i].checked = false;
}else{
oInput[i].checked = true;
}
}
}
// 获取值
var oRes = [];
function getAll(){
for(var i in oInput){
if(oInput[i].checked == true){
oRes.push('第' (Number(i) 1) '个选项,您的选择是' oInput[i].value);
}
}
if (oRes.length == 0) {
alert('您没有选择任何值');
}else{
alert(oRes);
oRes = [];
}
}
</script>
</html>