溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何實現javascript操作input標簽屬性checkbox全選”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何實現javascript操作input標簽屬性checkbox全選”這篇文章吧。
具體代碼如下所示：
<html>
<head>
< >
function selectAll(){
var checklist = document.getElementsByName ("selected");//獲取所有name值為selected的標簽
if(document.getElementById("controlAll").checked){//判斷當id為controlAll的標簽是否被選中
for(var i=0;i<checklist.length;i++){
checklist[i].checked = true;//當被選中時，則獲取所有name值為selected的標簽都被選中
}
}else{
for(var j=0;j<checklist.length;j++){
checklist[j].checked = false;//當不被選中時，則獲取所有name值為selected的標簽都不被選中
}
}
}
</ >
</head>
<body>
<form>
<input ="selectAll()" type="checkbox" name="controlAll" id="controlAll"/>全選<br>
1:<input ="heheda()" type="checkbox" name="selected" value="1"/><br>
2:<input ="heheda()" type="checkbox" name="selected" value="2"/><br>
3:<input ="heheda()" type="checkbox" name="selected" value="3"/><br>
4:<input ="heheda()" type="checkbox" name="selected" value="4"/><br>
5:<input ="heheda()" type="checkbox" name="selected" value="5"/><br>
6:<input ="heheda()" type="checkbox" name="selected" value="6"/><br>
</form>
< type="text/ ">
function heheda(){
var controlAll = document.getElementById("controlAll");//獲取id值為controlAll的標簽
var checklists = document.body.querySelectorAll("input[type='checkbox']").length;//獲取所有格式為checkbox的input標簽的數量
var selectedLength=document.body.querySelectorAll("input[name=selected]:checked").length;//獲取所有name值為selected，并且已經被選中的input標簽的數量
if(controlAll.checked){//判斷當id為controlAll的標簽是否被選中
controlAll.checked = false;//當被選中時，則自動取消id為controlAll的標簽選中
}else{
if(selectedLength == checklists-1){//當不被選中時，判斷當獲取所有name值為selected，并且已經被選中的input標簽的數量 與 獲取所有格式為checkbox的input標簽的數量-1 是否相等
controlAll.checked = true;//如果相等，則自動選中id為controlAll的標簽
}
}
}
</ >
</body>
</html>以上是“如何實現javascript操作input標簽屬性checkbox全選”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
