FavoriteLoading
◆◆0

通过js实现复选框操作教程（附代码）

重蔚 2018年4月2日 JavaScript自学教程 1,769

复选框操作

获取同名元素，返回该元素的数组

document.getElementsByName(“name”);

实现效果如下

通过js实现复选框操作教程（附代码）

示例源码：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<input type="checkbox" name="cboall" id="cboall" onclick="SelectAll(this)" />全选/全不选
<input type="button" value="反向选择" onclick="OrientSelect()" />
<input type="button" value="获取选中复选框的值" onclick="GetSelectedCheckBoxValues()" />
<br />
<input type="checkbox" onclick="SelectOrient();" value="cbo1" name="cbo[]" id="cbo[]" />1
<input type="checkbox" onclick="SelectOrient();" value="cbo2" name="cbo[]" id="cbo[]" />2
<input type="checkbox" onclick="SelectOrient();" value="cbo3" name="cbo[]" id="cbo[]" />3
<input type="checkbox" onclick="SelectOrient();" value="cbo4" name="cbo[]" id="cbo[]" />4
</body>
<script language="javascript" type="text/javascript">
//全选
function SelectAll(obj){
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
      cboes[i].checked=obj.checked;
      }
}
 
//反选
function SelectOrient(){
var cboall=document.getElementById("cboall");
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
      if(cboes[i].checked){
            cboall.checked=true;
            return;
            }
      }
cboall.checked=false;
}
 
//反向选择
function OrientSelect(){
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
      cboes[i].checked=!cboes[i].checked;
      }
}
 
//获取选中复选框的值
function GetSelectedCheckBoxValues(){
var cbovalues="";
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
      if(cboes[i].checked)
      cbovalues+=cboes[i].value+",";
      }
if(cbovalues=="")
alert("请至少选择一个子复选框");
else{
//去掉最后一个逗号
cbovalues=cbovalues.substr(0,cbovalues.length-1);
alert(cbovalues);
      }
}
</script>
</html>
欢迎分享本文，转载请保留出处！—重蔚自留地 站长邮箱：951076433@qq.com