Heim > Artikel > Web-Frontend > Implementierung der Multi-Select-Box-Funktion mithilfe von Javascript-Technologie
Implementierung der Multi-Select-Box-Funktion mithilfe von Javascript-Technologie
- 陈政宽～Original
- 2017-06-28 12:52:081309Durchsuche
Dieser Artikel stellt hauptsächlich die Verwendung von nativem JS zur Implementierung einer einfachen Mehrfachauswahlbox-Funktion vor. Er ist sehr gut und hat Referenzwert.
Ohne weitere Umschweife, ich Ich werde es direkt an alle senden. Der spezifische Code lautet wie folgt:
<!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('cheakAll');
var op=document.getElementsByTagName('p')[0];
var aInput=op.getElementsByTagName('input');
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>Das Obige ist die Einführung des Herausgebers in die Verwendung von nativem JS zur Implementierung einer einfachen Mehrfachauswahlbox-Funktion hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der Script House-Website bedanken!
Das obige ist der detaillierte Inhalt vonImplementierung der Multi-Select-Box-Funktion mithilfe von Javascript-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!