本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论