javascript实现全选，反选功能

淡淡的烟草味﹌ 2022-05-17 10:48 239阅读 0赞

### 今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下 ###

### 实现的方式就是 在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的name遍历通过  if...else...判断将状态改变，[原文章地址][Link 1] ###

这里需要注意括号的对应，还有拼写的正确，(我在多选按钮中少写了个c，导致操作失败)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript">
     //获取checkbox按钮组
     var allpro = document.getElementsByName("c1");
     //全选方法
     function change() {
        //获取全选按钮
     var all = document.getElementById("all");
     //全选按钮被选中时，遍历所有按钮
        if (all.checked) {
         for (var i = 0; i < allpro.length; i++) {
         if (allpro[i].type=="checkbox") {
         allpro[i].checked=true;
    
         }
         }
         //全选按钮取消
        }else{
         for (var i = 0; i < allpro.length; i++) {
         if (allpro[i].type=="checkbox") {
         allpro[i].checked=false;
         }
         }
        }
     }
     //反选的方法
     function revs() {
        //获得反选按钮
     var reverse = document.getElementById("revcheck");
     //反选按钮被选中时，遍历所有按钮
        if (reverse.checked) {
         for (var i = 0; i < allpro.length; i++) {
         if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
         allpro[i].checked= false;
         }else if (allpro[i].type=="checkbox"&&allpro[i].checked==false) {
         allpro[i].checked= true;
         }
    
         }
         //反选按钮取消
         }else{
            for (var i = 0; i < allpro.length; i++) {
         if (allpro[i].type=="checkbox"&&allpro[i].checked==true) {
         allpro[i].checked= false;
         }else if (allpro[i].type=="checkbox"&&allpro[i].checked==false) {
         allpro[i].checked= true;
         }
    
         }
         }
        }
    
    </script>
    
    </head>
    <body>
        <input type="checkbox" name="c0" id="all" value="全选" onclick="change()">全选
    <input type="checkbox" name="r0" id="revcheck" value="反选" onclick="revs()">反选
    <hr>
    <table>
    <tr>
    <td><input type="checkbox" name="c1">上海</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="c1">广州</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="c1">深圳</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="c1">北京</td>
    </tr>
    </table>
    </body>
    </html>

[Link 1]: https://blog.csdn.net/wangdajiao/article/details/52870095