JavaScript

超轻量级php框架startmvc

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

更新时间:2020-06-08 18:30:02 作者:startmvc
本文实例为大家分享了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>

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

js复选框全选反选 js复选框全选 js复选框反选