JS实现勾选全部复选框和不全选复选框

前言

在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时，为了方便用户选中所有的复选框,网页界面

会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢

示例效果

原生Js

实现全选的效果,复选框是否被勾选,是由它的checked属性决定的,因此,实现本例效果的关键就是找到所有对应的复选框,然后将其它的checked属性设置为true或false实现全选或全不选

如下实现一个简易的全选功能

1.  
   // 选择所有函数
2.  
   function checkAll(c) {
3.  
       var arr = document.getElementsByTagName("myname");
4.  
       if(c) {
5.  
           // 遍历所有的复选框
6.  
           for(var i = 0;i<arr.length;i ) {
7.  
               arr[i].checked = true;   // 选中
8.  
           }
9.  
       }else {
10.  
            // 遍历所有的复选框
11.  
            for(var i = 0;i<arr.length;i ) {
12.  
                arr[i].checked = false; // 不选中
13.  
            }
14.  
        }
15.  
    }

如下是html

1.  
   <input type="checkbox" name="mayall" onclick="checkAll(this.checked)" />全选<br />
2.  
   <input type="checkbox" name="myname" />前端&nbsp;&nbsp;
3.  
   <input type="checkbox" name="myname" />后端&nbsp;&nbsp;
4.  
   <input type="checkbox" name="myname" />小程序

Vue版本实现

如下代码所示,像这种全选,复选框,我们往往在提交的时候,是需要将具体的参数值,传递给后端的,而并非一些UI组件示例库当中 实现一下效果,就完事了的,往往需要自己进行二次特殊处理的

以下是上面全选,复选的示例代码

1.  
   <template>
2.  
       <div class="wrap">
3.  
           <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
4.  
               <div style="margin: 15px 0;"></div>
5.  
               <el-checkbox-group v-model="checkedLanNames" @change="handleCheckedlanguagesChange">
6.  
                   <el-checkbox v-for="lan in checkedLanOptions" :label="lan.type" :key="lan.name">{{lan.name}}</el-checkbox>
7.  
           </el-checkbox-group>
8.  
       </div>
9.  
   </template>
10.  
     
11.  
    <script>
12.  
        export default {
13.  
            name: 'checkedAll',
14.  
            data() {
15.  
                return {
16.  
                    checkAll: true, // 默认全选，true表示全选,false,不全选
17.  
                    checkedLanNames: [], // 绑定默认选中
18.  
                    type: "", // 向后端传的code字符串
19.  
                    languages: [
20.  
                        {
21.  
                            type:'1',
22.  
                            name: "前端"
23.  
                        },
24.  
                        {
25.  
                            type:'2',
26.  
                            name: "后端"
27.  
                        },
28.  
                        {
29.  
                            type:'3',
30.  
                            name: "小程序"
31.  
                        },
32.  
                        {
33.  
                            type:'4',
34.  
                            name: "云开发"
35.  
                        },
36.  
                    ],
37.  
                    isIndeterminate: true
38.  
                };
39.  
           },
40.  
     
41.  
           mounted () {
42.  
               this.checkedLanNames = this.languages.map(item => item.type);
43.  
           },
44.  
     
45.  
           computed: {
46.  
             checkedLanOptions() {
47.  
                return this.languages;
48.  
             }
49.  
           },
50.  
     
51.  
           methods: {
52.  
            handleCheckAllChange(val) {
53.  
                //console.log("全选", val); // val就是v-model绑定的值,即this.checkAll
54.  
                if (this.checkAll) {
55.  
                      // 当全选被选中的时候,循环遍历源数据,把数据的每一项加入到默认选中的数组中区
56.  
                     this.checkedLanNames = this.languages.map((item) => item.type);
57.  
                    } else {
58.  
                        this.checkedLanNames = [];
59.  
                        this.type = "";
60.  
                    }
61.  
                    this.isIndeterminate = false;
62.  
            },
63.  
            handleCheckedlanguagesChange(value) {
64.  
                    // value就是v-model绑定的值,即this.checkedLanNames
65.  
                    console.log(value);
66.  
                    if (this.checkedLanNames.length == this.languages.length) {
67.  
                        this.checkAll = true;
68.  
                    } else {
69.  
                        this.checkAll = false;
70.  
                    }
71.  
                    this.type = this.checkedLanNames.join(",");  // 用逗号拼接成字符串传递给后端
72.  
            }
73.  
        }
74.  
    }
75.  
    </script>
76.  
     
77.  
    <style lang="scss" scoped>
78.  
    .wrap {
79.  
        text-align: center;
80.  
        margin:20px 0 20px 0;
81.  
    }
82.  
    </style>

总结

实现全选与全不选在一些后台业务管理系统里面,是一个很常见基础的业务实现

全选与全不选的复选框是否被勾选,是由它的checked属性决定的,checked的属性值若为true那么状态为选中,若为false那么不选中

前端UI显示,与具体要向后端传入的值,是需要与后端协商的,上面的type也就是前后端协商的字段

前后端保持一致就可以了的,按照指定的数据格式传递给后端处理,后端需要什么样的数据格式,那就传具体的数据格式类型,比如,纯字符串,或数字等

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

VueJs中如何使用Teleport组件

VueJs中如何使用provide与inject

VueJs中customRef函数的使用

vueJs中toRaw与markRaw函数的使用比较

点击左下角查看更多