html多选框div,用原生JS实现简单的多选框功能

废话不多说了，直接给大家贴代码了，具体代码如下所示：

无标题文档

全选

//找到全选按钮

var oChkAllBtn=document.getElementById('cheakAll');

var oDiv=document.getElementsByTagName('div')[0];

var aInput=oDiv.getElementsByTagName('input');

var n=0; //计数器

//alert(aInput.length);

//点击全选按钮，让其他的全部选中

oChkAllBtn.οnclick=function(){

//判断我是什么状态

/*if(this.checked==true){

for(var i=0; i

aInput[i].checked=true;

}

}else{

for(var i=0; i

aInput[i].checked=false;

}

}*/

for(var i=0; i

if(this.checked==true){//判断全选按钮自己的状态

aInput[i].checked=true;

n=aInput.length; //控制计数器

}else{

aInput[i].checked=false;

n=0; //控制计数器

}

};

};

//--------------------------------------------

//每一个按钮绑定事件

for(var j=0; j

aInput[j].οnclick=function(){

//如果我自己是cheaked状态 n++ 否则 n--

if(this.checked==true){

n++;

}else{

n--;

};

//console.log(n);

//如果n==aInput.length

if(n==aInput.length){

oChkAllBtn.checked=true;

}else{

oChkAllBtn.checked=false;

}

};

};

以上所述是小编给大家介绍的用原生JS实现简单的多选框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！