當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现表单的全选,反选,获取值
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现表单的全选,反选,获取值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
構思
通過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>?
轉載于:https://www.cnblogs.com/wangyang0210/p/9546159.html
總結
以上是生活随笔為你收集整理的JavaScript实现表单的全选,反选,获取值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 6759: 异或序列
- 下一篇： SpringFox swagger2