javascript設定全選的方法:首先建立一個HTML範例檔案;然後新增script標籤並建立js程式碼;最後透過循環遍歷每個checkbox對象,將其checked屬性設為true實作全選功能即可。
本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
javascript怎麼設定全選?
JavaScript實作全選:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>checkbox的全选和取消全选</title> <script type="text/javascript"> //页面加载的时候,所有的复选框都是未选中的状态 function checkOrCancelAll(){ //1.获取checkbox的元素对象 var chElt=document.getElementById("chElt"); //2.获取选中状态 var checkedElt=chElt.checked; //3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消 var allCheck=document.getElementsByName("interest"); //4.循环遍历取出每一个复选框中的元素 var mySpan=document.getElementById("mySpan"); if(checkedElt){ //全选 for(var i=0;i<allCheck.length;i++){ //设置复选框的选中状态 allCheck[i].checked=true; } mySpan.innerHTML="取消全选"; }else{ //取消全选 for(var i=0;i<allCheck.length;i++){ allCheck[i].checked=false; } mySpan.innerHTML="全选"; } } </script> </head> <body> <input type="checkbox" id="chElt" οnclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/> 学习<input type="checkbox" name="interest" value="study"/> 阅读<input type="checkbox" name="interest" value="read"/> 运动<input type="checkbox" name="interest" value="sport"/> 旅行<input type="checkbox" name="interest" value="travel"/> 绘画<input type="checkbox" name="interest" value="draw"/> 音乐<input type="checkbox" name="interest" value="music"/> </body> </html>
Checkbox 物件:
Checkbox 物件代表一個 HTML 表單中的一個選取框。
在 HTML 文件中 每出現一次,Checkbox 物件就會被建立。
您可以透過遍歷表單的 elements[] 陣列來存取某個選擇框,或透過使用 document.getElementById() 。
checked 屬性:
checked 屬性設定或傳回 checkbox 是否應被選取。
語法
checkboxObject.checked=true|false
說明
該屬性保存了checkbox 的當前狀態,不管何時,這個值發生變化的時候,onclick 事件句柄就會觸發(也可能觸發onchange 事件句柄)。
【推薦學習:javascript高階教學】
#以上是javascript怎麼設定全選的詳細內容。更多資訊請關注PHP中文網其他相關文章!