HTML複選框實現 全選 反選 全不選的 簡單小例項
阿新 • • 發佈：2018-11-10
複選框實現 全選 反選 全不選的 簡單小例項
<html> <head> <title>HTML</title> <style type="text/css"> </style> </head> <body> <input type="checkbox" id="boxid" onclick="selectAllorNo();" />全選/全不選 <br/> <input type="checkbox" name="love"/>看書 <br/> <input type="checkbox" name="love"/>寫字 <br/> <input type="checkbox" name="love"/>看電視 <br/> <input type="checkbox" name="love"/>聽音樂 <br/> <input type="checkbox" name="love"/>打遊戲 <br/> <input type="checkbox" name="love"/>愛曉權 <br/> <br/> <input type="button" value="全選" onclick="selectAllOrNot(true);"/> <input type="button" value="全不選" onclick="selectAllOrNot(false);"/> <input type="button" value="反選" onclick="selectOthers();"/> <script type="text/javascript"> //實現全選或者全不選複選框的操作 function selectAllorNo(){ //獲取所有複選框的物件集 var boxid=document.getElementById("boxid"); // 當滑鼠點選按鈕時 點選狀態發生改變後 在執行此方法 因此 這裡的判斷應該為 // 如果複選框為true 說明之前是false 需要全選 反之 全不選 if(boxid.checked==false){ selectAllOrNot(false); }else{ selectAllOrNot(true); } } //實現全選按鈕 和 全不選按鈕的操作 function selectAllOrNot(bool){ //獲取name=love 的物件集 一個name可以對應多個元素 所有沒有getElementByName()這個方法 var loves=document.getElementsByName("love"); //獲取id=boxid 的物件集 一個id只能對應一個元素 所有沒有getElementsById()這個方法 var boxid=document.getElementById("boxid"); //將複選框設定為不選 boxid.checked=bool; for(var i=0;i<loves.length;i++){ loves[i].checked=bool; } } //實現反選的操作 function selectOthers(){ //獲取所有複選框的物件集 var loves=document.getElementsByName("love"); var boxid=document.getElementById("boxid"); if(boxid.checked==true){boxid.checked=false} else{boxid.checked=true} for(var i=0;i<loves.length;i++){ if(loves[i].checked==true){loves[i].checked=false} else{loves[i].checked=true} } } </script> </body> </html>