利用JS实现全选相关功能

最新推荐文章于 2024-01-20 13:26:55 发布

王大熊

最新推荐文章于 2024-01-20 13:26:55 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Sugar_tea/article/details/38094733

<!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>
<script type="text/javascript">
function allCheck(){
var alls=document.getElementById("allCheck");
var lists=document.getElementsByName("list");
for(var i=0;i<lists.length;i++){
if(alls.checked){
lists[i].checked=true;
}else{
lists[i].checked=false;
}
}
}
function oneCheck(){
var index=0;
var alls=document.getElementById("allCheck");
var lists=document.getElementsByName("list");
for(var i=0;i<lists.length;i++){
if(lists[i].checked){
index++;
}
}
if(index==5){
alls.checked=true;
}else{
alls.checked=false;
}
}
</script>
</head>

<body>
<input type="checkbox" name="list" id="check1" onClick="oneCheck()">吃饭
<input type="checkbox" name="list" id="check2" onClick="oneCheck()">睡觉
<input type="checkbox" name="list" id="check3" onClick="oneCheck()">运动
<input type="checkbox" name="list" id="check4" onClick="oneCheck()">跳舞
<input type="checkbox" name="list" id="check5" onClick="oneCheck()">旅游
<input type="checkbox" id="allCheck" onClick="allCheck()" />全选
</body>
</html>