廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<!doctype html><html><head><meta charset="utf-8"><title>無標(biāo)題文檔</title></head><body><input id="cheakAll" type="checkbox">全選<div><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></div></body></html><script>//找到全選按鈕var oChkAllBtn=document.getElementById('cheakAll');var oDiv=document.getElementsByTagName('div')[0];var aInput=oDiv.getElementsByTagName('input');var n=0; //計數(shù)器//alert(aInput.length);//點擊全選按鈕,讓其他的全部選中oChkAllBtn.onclick=function(){//判斷我是什么狀態(tài)/*if(this.checked==true){for(var i=0; i<aInput.length; i++){aInput[i].checked=true;}}else{for(var i=0; i<aInput.length; i++){aInput[i].checked=false;}}*/for(var i=0; i<aInput.length; i++){if(this.checked==true){//判斷全選按鈕自己的狀態(tài)aInput[i].checked=true;n=aInput.length; //控制計數(shù)器}else{aInput[i].checked=false;n=0; //控制計數(shù)器}};};//--------------------------------------------//每一個按鈕綁定事件for(var j=0; j<aInput.length; j++){aInput[j].onclick=function(){//如果我自己是cheaked狀態(tài) n++ 否則 n--if(this.checked==true){n++;}else{n--;};//console.log(n);//如果n==aInput.lengthif(n==aInput.length){oChkAllBtn.checked=true;}else{oChkAllBtn.checked=false;}};};</script>以上所述是小編給大家介紹的用原生JS實現(xiàn)簡單的多選框功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持!
新聞熱點
疑難解答
圖片精選