小段code_TagName/onload_實現全選不選反選

時間 2019-11-24

標籤 code tagname onload 實現全選简体版

原文原文鏈接

下面代碼是實現全選、不選和反選的功能：因爲javascript 是解釋型語言，讀一句執行一句，當script標籤中獲取的元素在以後出現，將出現錯誤，能夠用window.onload解決這個問題，使其在加載完整個頁面文件時再執行裏邊的代碼；先前學習的document.getElementById()只能最多獲取一個標籤的id，能夠用document.getElementsByTagName()獲取一個數組存取多個標籤id，此外getElementsByTagName()前不是必須爲document javascript

<!DOCTYPE html> html

<html> <head> <title></title> <meta charset="UTF-8" /> <script> window.onload = function () { var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3'); var divbtn = document.getElementById('checkinput'); var oBtn = divbtn.getElementsByTagName('input'); btn1.onclick = function () { for(var i=0;i<oBtn.length;i++) { oBtn[i].checked = true; } } btn2.onclick = function () { for(var i=0;i<oBtn.length;i++) { oBtn[i].checked = false; } } btn3.onclick = function () { for(var i=0;i<oBtn.length;i++) { if(oBtn[i].checked == false) { oBtn[i].checked = true; }else { oBtn[i].checked = false; } } } } </script> </head> <body> <input type="button" value="全選" id="btn1"/> <input type="button" value="不選" id="btn2"/> <input type="button" value="反選" id="btn3"/> <div id="checkinput"> <input type="checkbox" /><br> <input type="checkbox" /><br> <input type="checkbox" /><br> <input type="checkbox" /><br> <input type="checkbox" /><br> <input type="checkbox" /><br> <input type="checkbox" /><br> </div> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。