实现js中复选框的多选与反选

来源：动视网责编：小采时间：2020-11-27 20:12:38

实现js中复选框的多选与反选

实现js中复选框的多选与反选:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ selAll = document.getElementById("selAll"); hobbys = document.getElements

推荐度：

点击下载本文 文档为doc格式

导读实现js中复选框的多选与反选:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ selAll = document.getElementById("selAll"); hobbys = document.getElements

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script>

 window.onload = function(){
 selAll = document.getElementById("selAll");
 hobbys = document.getElementsByName("hobby");
 fx = document.getElementById("fx"); //全选事件
 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>
 <input type="checkbox" name="" id="selAll" />全选 
 <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中复选框的多选与反选

推荐度：

点击下载本文 文档为doc格式

标签：实现 js 复选框

热门焦点

实现js中复选框的多选与反选

实现js中复选框的多选与反选

实现js中复选框的多选与反选

最新推荐

猜你喜欢

热门推荐