Implementing multi-select box function using javascript technology-JS Tutorial-php.cn

Implementing multi-select box function using javascript technology

陈政宽～

Release： 2017-06-28 12:52:08

Original

1388 people have browsed it

This article mainly introduces the use of native JS to implement a simple multi-select box function. It is very good and has reference value. Friends who need it can refer to it.

No more nonsense, just post it for everyone. The code is here. The specific code is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="cheakAll" type="checkbox">全选
<p>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</p>
</body>
</html>
<script>
//找到全选按钮
var oChkAllBtn=document.getElementById(&#39;cheakAll&#39;);
var op=document.getElementsByTagName(&#39;p&#39;)[0];
var aInput=op.getElementsByTagName(&#39;input&#39;);
var n=0; //计数器
//alert(aInput.length);
//点击全选按钮，让其他的全部选中
oChkAllBtn.onclick=function(){
//判断我是什么状态
/*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){//判断全选按钮自己的状态
aInput[i].checked=true;
n=aInput.length; //控制计数器
}else{
aInput[i].checked=false;
n=0; //控制计数器
}
};
};
//--------------------------------------------
//每一个按钮绑定事件
for(var j=0; j<aInput.length; j++){
aInput[j].onclick=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;
}
};
};
</script>

Copy after login

The above is the editor’s introduction to using native JS to implement a simple multi-select box function. I hope it will be helpful to you. If you have any questions, please Leave me a message and I will reply to you in time. I would also like to thank you all for your support of the Script House website!

The above is the detailed content of Implementing multi-select box function using javascript technology. For more information, please follow other related articles on the PHP Chinese website!