用JavaScript编码实现如图功能,全选,全不选,反选

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <title>全选、反选</title>
 <script type="text/javascript">
  window.οnlοad=function() {
   //全选/全不选
   document.getElementById("selectDeSelectAll").οnclick=function() {
    var hobbys = document.getElementsByName("hobby");
    for(var i = 0; i < hobbys.length; i++) {
     hobbys[i].checked = this.checked;
    }
   }
   //按键：全选
   document.getElementById("bt1").onclick = function() {
    var hobbys = document.getElementsByName("hobby");
    for(var i = 0; i < hobbys.length; i++) {
     hobbys[i].checked = true;
    }
   }
   //按键：全不选
   document.getElementById("bt2").onclick = function() {
    var hobbys = document.getElementsByName("hobby");
    for(var i = 0; i < hobbys.length; i++) {
     hobbys[i].checked = false;
    }
   }
 
   //按键：反选
   document.getElementById("bt3").onclick = function() {
    var hobbys = document.getElementsByName("hobby");
    for(var i = 0; i < hobbys.length; i++) {
     hobbys[i].checked = !hobbys[i].checked;
    }
   }
  }
 </script>
</head>
<body>
<h2>请选择您的爱好：</h2>
 <input type="checkbox" id="selectDeSelectAll">全选/全不选<br/>
 <input type="checkbox" name="hobby" value="eat"/>吃饭
 <input type="checkbox" name="hobby" value="sleep"/>睡觉
 <input type="checkbox" name="hobby" value="game"/>打游戏
 <input type="checkbox" name="hobby" value="study"/>学习
 <br/><br/>
 <input type="button" id="bt1" value="全选"/>
 <input type="button" id="bt2" value="全不选"/>
 <input type="button" id="bt3" value="反选"/>
 <input type="button" id="bt4" value="提交"/>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容