suchen

Heim >Web-Frontend >js-Tutorial >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:081398Durchsuche

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(&#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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript, regulärer Ausdruck zur Überprüfung der AusweisinformationenNächster Artikel：Javascript, regulärer Ausdruck zur Überprüfung der Ausweisinformationen

In Verbindung stehende Artikel

Mehr sehen