原生js实现复选框（全选/全不选/反选）效果【含完整代码】_js 设置 checkbox文字

作者：繁依Fanyi0 | 2024-03-31 08:57:28

踩

js 设置 checkbox文字

实现效果

在这里插入图片描述
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面；
2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示；
3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；

实现思路

1、获取所勾选的值组成的数组

定义一个数组checkValues，存放用户所勾选的内容。
再定义一个函数getValues()，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用innerText属性将数组展示到页面中。
捕获选框的onclick点击事件，当用户点击时，执行getValues()。

    // 显示选择内容的文字
    var checkText = document.getElementById("check_text");
    // 定义选择内容的数组
    var checkValues = [];
    
    // 根据复选框组勾选状态，获取当前已选择的值并渲染至页面
    function getValues(){
        // 数组置空
        checkValues=[];
        // 依次检查是否勾选，将勾选的内容放进数据
        for(var i = 0; i < checks.length; i++){
            if(checks[i].checked){
                checkValues.push(checks[i].value);
            }  
        }
        // 将选择的数组中的内容渲染至页面
        checkText.innerText = JSON.stringify(checkValues);
        checkText.style.color = "#09f"
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、更新全选框状态及文字显示

定义一个判断是否全选的函数isCheckAll()，遍历选框数组checks，如果全部被选择，返回true，否则返回false。
捕获选框的click点击事件，当用户点击时，判断isCheckAll()的值，若为真，勾上全选框，并且更新提示文字；若为假，不勾选全选框，文字也为默认的“全选”。

    // 全选input勾选框
    var checkAll = document.getElementById("checkAll");
    // 检查列表复选框是否全部勾选
    function isCheckAll(){
        for(var i = 0; i < checks.length; i++){
            if(!checks[i].checked){
                return false;
            }  
        }
        return true;
    }
    
    // 根据全选框状态改变文字
    function changeText(){
        // 如果全选框是勾选的状态，提示文字变为“全不选”
        if(checkAll.checked){
            document.querySelector("dl>dt>label").innerHTML = "全不选";
        }else{
            document.querySelector("dl>dt>label").innerHTML = "全选";
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、反选

当反选按钮被点击时，遍历复选框，将选择状态全部置反，然后判断状态是否为全选

    // 点击“反选”，所有复选框状态取反
    ReverseCheck.onclick = function(){
        for(var i = 0; i < checks.length; i++){
            checks[i].checked = !checks[i].checked;
        }
        // 若点击反选时，全选框为选中状态，则取消选中
        if(checkAll.checked){
            checkAll.checked = false;
        }
        // 模拟列表点击事件，若反选后，复选框全部选中，则选中全选框，更改文字
        dd.click();
    }
1
2
3
4
5
6
7
8
9
10
11
12

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框（checkbox）全选/全不选/反选</title>
    <style>
        body,
        dl,
        dt,
        dd,
        p {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Tahoma;
            font-size: 12px;
        }
        label,
        input,
        a {
            vertical-align: middle;
        }
        label {
            padding: 0 10px 0 5px;
        }
        a {
            color: #09f;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
        dl {
            width: 120px;
            margin: 10px auto;
            padding: 10px 5px;
            border: 1px solid #666;
            border-radius: 5px;
            background: #fafafa;
        }
        dt {
            padding-bottom: 10px;
            border-bottom: 1px solid #666;
        }
        dt label {
            font-weight: 700;
        }
        p{
            text-align: center;
        }
        dd > p {
            margin-top: 10px;
            text-align: left;
        }
        
    </style>
</head>
<body>
    <dl>
        <dt>
            <input type="checkbox" id="checkAll" />
            <label>全选</label>
            <a href="javascript:;">反选</a>
        </dt>
        <dd>
            <p>
                <input type="checkbox" name="item" value="one"/>
                <label>one</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="two"/>
                <label>two</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="three"/>
                <label>three</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="four"/>
                <label>four</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="five"/>
                <label>five</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="six"/>
                <label>six</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="seven"/>
                <label>seven</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="eight"/>
                <label>eight</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="nine"/>
                <label>nine</label>
            </p>
            <p>
                <input type="checkbox" name="item" value="ten"/>
                <label>ten</label>
            </p>
        </dd>
        
    </dl>
    <p>您所选择的内容包括：<span id="check_text"></span></p><br>
    <p>
        1、切换全选/全不选文字；
        <br />
        <br />
        2、根据选中个数更新全选框状态；
    </p>
</body>
<script>
    // 全选input勾选框
    var checkAll = document.getElementById("checkAll");
    // 复选框组
    var checks = document.querySelectorAll("dd > p > input");
    // 选择列表
    var dd = document.querySelector("dd");
    // 反选
    var ReverseCheck = document.querySelector("dl > dt > a")
    // 显示选择内容的文字
    var checkText = document.getElementById("check_text");

    // 定义选择内容的数组
    var checkValues = [];

    // 检查列表复选框是否全部勾选
    function isCheckAll(){
        for(var i = 0; i < checks.length; i++){
            if(!checks[i].checked){
                return false;
            }  
        }
        return true;
    }
    // 根据全选框状态改变文字
    function changeText(){
        // 如果全选框是勾选的状态，提示文字变为“全不选”
        if(checkAll.checked){
            document.querySelector("dl>dt>label").innerHTML = "全不选";
        }else{
            document.querySelector("dl>dt>label").innerHTML = "全选";
        }
    }
    // 根据复选框组勾选状态，获取当前已选择的值并渲染至页面
    function getValues(){
        // 数组置空
        checkValues=[];
        // 依次检查是否勾选，将勾选的内容放进数据
        for(var i = 0; i < checks.length; i++){
            if(checks[i].checked){
                checkValues.push(checks[i].value);
            }  
        }
        // 将选择的数组中的内容渲染至页面
        checkText.innerText = JSON.stringify(checkValues);
        checkText.style.color = "#09f"
    }

    // 列表被点击
    dd.onclick = function(){
        // 检查是否已勾选所有复选框，更改全选框状态
        if(isCheckAll()){
            checkAll.checked = "true";
        }else{
            checkAll.checked = false;
        }
        // 根据全选框状态改变文字
        changeText();
        // 获取当前所选择的内容并渲染至页面
        getValues();
    }

    // 全选框被点击
    checkAll.onclick = function(){
        // 所有复选框的状态跟全选框的状态保持一致
        for(var i = 0; i < checks.length; i++){
            checks[i].checked = checkAll.checked;
        }
        // 根据全选框状态改变文字
        changeText();
        // 获取当前所选择的内容并渲染至页面
        getValues();
    }

    // 点击“反选”，所有复选框状态取反
    ReverseCheck.onclick = function(){
        for(var i = 0; i < checks.length; i++){
            checks[i].checked = !checks[i].checked;
        }
        // 若点击反选时，全选框为选中状态，则取消选中
        if(checkAll.checked){
            checkAll.checked = false;
        }
        // 若反选后，复选框全部选中，则选中全选框，更改文字
        dd.click();
    }

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/344043