Maison >interface Web >js tutoriel >Explication détaillée de l'implémentation des événements de sélection automatique et de sélection inverse de la case à cocher JavaScript

Explication détaillée de l'implémentation des événements de sélection automatique et de sélection inverse de la case à cocher JavaScript

黄舟original: 2017-09-28 10:43:472139parcourir

Cet article présente principalement en détail l'implémentation javaScript de l'événement checkbox all-select et unselect. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage le javaScript avec. tout le monde. Le code spécifique pour réaliser la sélection des cases à cocher et la sélection inverse est pour votre référence. Le contenu spécifique est le suivant

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Étude de cas de la mise en œuvre d'un événement de glissement de souris JavaScriptArticle suivant：Étude de cas de la mise en œuvre d'un événement de glissement de souris JavaScript

Articles Liés

Voir plus