【JS】复选框实现效果

最新推荐文章于 2023-02-21 15:38:18 发布

AlbertHongXS

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量803

点赞数 1

分类专栏： js 初学PHP

本文链接：https://blog.csdn.net/hongxiaoshuang/article/details/52858470

版权

初学PHP 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

<title>复选框</title>
</head>

<body>
<input type="checkbox" οnclick="SelectAll(this);" name="cboall"id="cboall" />全选/全不选<br />
<input type="checkbox"name="cbo" id="cbo" οnclick="SelectOratic()" value="cbo1"/>1<input name="cbo" id="cbo" type="checkbox"οnclick="SelectOratic()" value="cbo2"/>2<input οnclick="SelectOratic()" type="checkbox"name="cbo" id="cbo"value="cbo3" />3
<input οnclick="SelectOratic()" type="checkbox"name="cbo" id="cbo"value="cbo4" />4
<input type="button"value="反选" οnclick="SelectOnly();" />
<input type="button" value="获取选中复选框的值" οnclick="GetSlectedCheckBoxValue();" />
</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 SelectOratic(){
var cboall=document.getElementById("cboall");
var cboes=document.getElementsByName("cbo");
var result=false;//控制全选复选框是否被选中
for(var i=0;i<cboes.length;i++){
if(cboes[i].checked)
{
result=true;
break;
}
}
cboall.checked=result;
}

//反选
function SelectOnly(){

var cboall=document.getElementById("cboall");
var cboes=document.getElementsByName("cbo");
for(var i=0;i<cboes.length;i++){
cboes[i].checked=!cboes[i].checked;}

/* 解决在默认状态下点击反选时全选复选框选不中和在全选状态下点击反选时全选复选框去不掉的BUG*/
for(var i=0;i<cboes.length;i++){
if(cboes[i].checked){
cboall.checked=true;
return;}
else cboall.checked=false ;

}
}
//获取复选框的值
function GetSlectedCheckBoxValue(){
var cbovalues=""
var cboes=document.getElementsByName("cbo");
for (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>

实现效果如下：

默认状态：