快捷導(dǎo)航

JS操作input標(biāo)簽屬性checkbox全選的實(shí)現(xiàn)代碼

更新時(shí)間：2017年03月02日 11:27:32 投稿：mrr

這篇文章主要介紹了JS操作input標(biāo)簽屬性checkbox全選的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

廢話不多說(shuō)了，具體代碼如下所示：

<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)被選中時(shí)，則獲取所有name值為selected的標(biāo)簽都被選中
 } 
 }else{
 for(var j=0;j<checklist.length;j++){
  checklist[j].checked = false;//當(dāng)不被選中時(shí)，則獲取所有name值為selected的標(biāo)簽都不被選中
 }
 }
}
</ >
</head>
<body>
<form>
<input ="selectAll()" type="checkbox" name="controlAll" style="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)被選中時(shí)，則自動(dòng)取消id為controlAll的標(biāo)簽選中
 }else{
  if(selectedLength == checklists-1){//當(dāng)不被選中時(shí)，判斷當(dāng)獲取所有name值為selected，并且已經(jīng)被選中的input標(biāo)簽的數(shù)量 與 獲取所有格式為checkbox的input標(biāo)簽的數(shù)量-1 是否相等
  controlAll.checked = true;//如果相等，則自動(dòng)選中id為controlAll的標(biāo)簽
  }
 }
 }
</ >
</body>
</html>

以上所述是小編給大家介紹的JS操作input標(biāo)簽屬性checkbox全選的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: