JavaScript实现表单的全选,反选,获取值

时间:2024-07-13 15:35:20

构思

  通过for循环和for in循环来实现,界面效果如下

  JavaScript实现表单的全选,反选,获取值

步骤

  全选:

      循环给所有的表单设置checked

  反选:

      循环内判断checked是否为true,如果为true则改为false否则改为true

  获取值:

      最开始用for取,但是只打印最后一个,然后就放弃直接使用for in 来取值,后面有时间再思考这个。如果有更好的方法,您可以在评论区留下。

<!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>