廢話不多說了,具體代碼如下所示:
<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" 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的標簽 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>
以上所述是小編給大家介紹的JS操作input標簽屬性checkbox全選的實現代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答