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