js中checkbox中的全选和反选效果实现
2017-08-02 21:50
645 查看
<!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属性
相关文章推荐
- js中checkbox中的全选和反选效果实现
- 利用Vue.js实现checkbox的全选反选效果
- js实现简单的checkbox全选和取消全选效果
- Js 实现一组checkBox全选、不选、反选功能
- JS实现全选、不选和反选效果
- 分别用js和jq实现百度全选反选效果
- js实现checkbox全选和反选示例
- JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
- js实现checkbox全选和反选示例
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- 使用js实现checkbox的全选与反选功能
- 使用js实现checkbox的全选与反选功能二
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- JS实现CheckBoxList的全选与反选[支持IE,FireFox]
- 通过js实现将所当页的checkbox全选 并且获取其value值
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- JS实现复选框(Checkbox)全选和取消 --ASP.NET中实例运用
- JS实现checkbox的全选和取消全选
- Js实现表单中的checkbox对勾选中效果