利用js实现多个复选框反选或全选_js 多个复选框写法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47065927/article/details/107203736

利用js实现多个复选框反选或全选

在表单里面有时会出现多个复选框，一个个地选不是很方便，可通过一个按钮进行快速选择，使用更方便。通过一个简单的demo实现这一功能。
step1.创建项目文件夹，命名为demos.
step2.在文件夹中创建html文件，命名为demo-1.html。并写好基本的结构代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
     <script src="js/ZY-6.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <input type="checkbox" name="c">1<br>
  <input type="checkbox" name="c">2<br>
  <input type="checkbox" name="c">3<br>
  <input type="checkbox" name="c">4<br>
  <input type="checkbox" name="c">5<br>
  <input type="checkbox" name="c">6<br>
  <input type="checkbox" name="c">7<br>
  <hr>
  <input type="button" id="fan" onclick="fan()" value="反选">
 </body>
</html>

step3.创建js文件夹，在里面新建一个js文件。
step4.在js中写入功能函数：

//反选
    function fan() {             //定义反选功能函数
      var stuts=document.getElementById("fan");        //获取id为fan的button
      var c=document.getElementsByName("c");           //获取名字为c的复选框
      for(var i=0;i<c.length;i++){
           c[i].checked=!c[i].checked;
      }
    }