◆◆0

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

重蔚 2018年4月2日 JavaScript自学教程 35 0

复选框操作

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

document.getElementsByName(“name”);

实现效果如下

示例源码：

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