suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Implementierung von JavaScript-Checkbox-All-Select- und Inverse-Select-Ereignissen

Detaillierte Erläuterung der Implementierung von JavaScript-Checkbox-All-Select- und Inverse-Select-Ereignissen

黄舟
黄舟Original
2017-09-28 10:43:472139Durchsuche

In diesem Artikel wird hauptsächlich JavaScript zur Implementierung des Kontrollkästchens „All-Select“ und „Unselect“ vorgestellt. Es hat einen bestimmten Referenzwert.

Das Beispiel in diesem Artikel teilt JavaScript mit allen Der spezifische Code zur Realisierung der Kontrollkästchenauswahl und der umgekehrten Auswahl dient als Referenz. Der spezifische Inhalt lautet wie folgt:

Code


<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>

 <script>

  window.onload=function(){
   var selAll=document.getElementById("selAll");
   var hobbys=document.getElementsByName("hobby");
   var fx=document.getElementById("fx");    
   var myClick=document.getElementById("xz");

   function myClick(){     
    alert("hello");
   }


   //全选事件
   selAll.onclick=function(){
    if(selAll.checked == true){
     for ( var i=0; i<hobbys.length; i++) {
      hobbys[i].checked=true;
     }
    }else{
     for ( var i=0; i<hobbys.length; i++) {
      hobbys[i].checked=false;
     }
    }


   }

   //反选事件
   fx.onclick=function(){

    for (var i=0; i<hobbys.length; i++) {
     var b=hobbys[i];
     if (b.checked == true) {
      b.checked=false
     }else{
      b.checked=true;
     }
    }

   }
  }
 </script>
</head>
<body>

 <span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全选</span>
 <button id="fx">反选</button></br>
 <input type="checkbox" name="hobby" />羽毛球
 <input type="checkbox" name="hobby"/>绘画
 <input type="checkbox" name="hobby"/>唱歌
 <input type="checkbox" name="hobby"/>跳舞
</body>
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierung von JavaScript-Checkbox-All-Select- und Inverse-Select-Ereignissen. 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：Fallstudie zur Implementierung eines JavaScript-MausziehereignissesNächster Artikel：Fallstudie zur Implementierung eines JavaScript-Mausziehereignisses

In Verbindung stehende Artikel

Mehr sehen