溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript設置全選的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
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 文檔中 <input type="checkbox"> 每出現一次，Checkbox 對象就會被創建。
您可以通過遍歷表單的 elements[] 數組來訪問某個選擇框，或者通過使用 document.getElementById() 。
checked 屬性：
checked 屬性設置或返回 checkbox 是否應被選中。
語法
checkboxObject.checked=true|false
說明
該屬性保存了 checkbox 的當前狀態，不管何時，這個值發生變化的時候，onclick 事件句柄就會觸發（也可能觸發 onchange 事件句柄）。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“javascript設置全選的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
