构思
通过for循环和for in循环来实现,界面效果如下
步骤
全选:
循环给所有的表单设置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>