JavaScript複選框全選反選事件的實作詳解-js教程-PHP中文網

JavaScript複選框全選反選事件的實作詳解

黄舟

發布： 2017-09-28 10:43:47

原創

2027 人瀏覽過

這篇文章主要為大家詳細介紹了javaScript實現複選框全選反選事件，具有一定的參考價值，有興趣的小伙伴們可以參考一下

本文實例為大家分享了javaScript實作複選框全選反選的具體程式碼，供大家參考，具體內容如下

<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>

登入後複製

以上是JavaScript複選框全選反選事件的實作詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！