JS操作Checkbox实例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53630069/article/details/120377999

有几个checkedbox和几个button,

你需要通过js的方式来达到按button时达成某些效果

原文代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   <style type="text/css">
       div{

           text-align: center;

       }
   </style>



   <script type="text/javascript">
       window.onload = function(){
           var all = document.getElementById("checkall");
           var notall = document.getElementById("notcheckall");
           var reverse = document.getElementById("reverse");
           var alert2 = document.getElementById("alert");



           var sport = document.getElementsByName("sport");
           all.onclick = function(){
               for(var start = 0;start < sport.length;start++){
                   sport[start].checked = true;
               }
               alert("checked all");

           };

           notall.onclick = function(){
               for(var start = 0;start < sport.length;start++){
                   sport[start].checked = false;
               }
               alert("not checked all");

           };
           reverse.onclick = function(){
               for(var start = 0;start < sport.length;start++){
                   if(sport[start].checked == true){
                       sport[start].checked = false;

                   }else{
                       sport[start].checked = true;
                   }
               }
               alert("reverse");

           };
           alert2.onclick = function(){
               alert("提交了哦！");
           };
       }
   </script>



   </head>

   <body>
       <div id="text">
           <a >你最喜欢的运动是？</a>
       </div>
       <br />
       <div id="">
           <input type="checkbox" name="sport" id="first" value="篮球" />篮球
           <input type="checkbox" name="sport" id="first" value="足球" />足球
           <input type="checkbox" name="sport" id="first" value="羽毛球" />羽毛球
           <input type="checkbox" name="sport" id="first" value="乒乓球" />乒乓球
       </div>
       <br />
       <div id="">
           <button id="checkall"type="button">全选</button>
           <button id="notcheckall"type="button">全不选</button>
           <button id="reverse"type="button">反选</button>
           <button id="alert"type="button">提交</button>
       </div>

   </body>
</html>