◆◆0

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

重蔚 2018年4月2日 JavaScript自学教程 2,153 views

复选框操作

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

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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

<input type="checkbox" name="cboall" id="cboall" onclick="SelectAll(this)" />全选/全不选

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

//全选

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

相关文章