当前位置：首页 > 资讯 > 技术文档

javaScript实现复选框全选反选事件详解

时间：2021-08-30 12:26 编辑：来源：阅读：
扫一扫，手机访问

摘要：javaScript实现复选框全选反选事件详解

本文实例为大家分享了javaScript实现复选框全选反选的具体代码，供大家参考，具体内容如下 [img]http://files.jb51.net/file_images/article/201709/2017927144750415.jpg?2017827144759[/img] 代码

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：javascript call和apply方法
下一篇：基于gulp合并压缩Seajs模块的方式说明

资讯排行榜
更多>>