首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:17:12
字体:
来源:转载
供稿:网友

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表