您好,欢迎访问本站博客!联系QQ:1343013953
  • 四象限时间管理法则:①重要且紧急的事;②重要但不紧急的事;③不重要但紧急的事;④不重要且不紧急的事

checked全选功能

CSS/Script wujinhua 2019-08-22 391 次浏览 0个评论
网站分享代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox的全选和取消全选</title>

</head>
<body>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){

//1.获取checkbo的元素对象
var chElt=document.getElementById("chElt");

//2.获取选中状态
var checkedElt=chElt.checked;
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");

//4.循环遍历取出每一个复选框中的元素
var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
mySpan.innerHTML="全选";
}
}
</script>
<input type="checkbox" id="chElt" onclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
学习<input type="checkbox" name="interest" value="study"/>
阅读<input type="checkbox" name="interest" value="read"/>
运动<input type="checkbox" name="interest" value="sport"/>
旅行<input type="checkbox" name="interest" value="travel"/>
绘画<input type="checkbox" name="interest" value="draw"/>
音乐<input type="checkbox" name="interest" value="music"/>
</body>

</html>


已有 391 位网友参与,快来吐槽:

发表评论

歌曲 - 歌手
0:00

站点统计