js中checkbox中的全选和反选效果实现

最新推荐文章于 2022-04-25 23:46:45 发布

weixin_39320717

最新推荐文章于 2022-04-25 23:46:45 发布

阅读量417

点赞数 1

分类专栏： js

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
 
 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
 
 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

错误总结：
1、将var reverse = document.getElementById("revcheck");和var reverse = document.getElementById("revcheck"); 这两个获取全选和反选按钮的对象的方法写成全局变量，导致两个变量一直是初始状态值，js中调用的是单个函数并不像Java中直接调用的是主函数

2、遍历的单个checkbox对象改变状态时，容易忘记加checked属性