Detaillierte Erläuterung der Implementierung von JavaScript-Checkbox-All-Select- und Inverse-Select-Ereignissen-js-Tutorial-php.cn

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

黄舟

Freigeben： 2017-09-28 10:43:47

Original

2027 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!