在编写购物车页面可以使用,购物车商品太多一个一个选太费时间。全选功能代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>复选框全选按钮</title>
<script>
window.onload=function(){
//获取全选按钮:id=all
//获取爱好复选按钮组:name=hobby(元素name来获取)
var oCa=document.getElementById("all");
var oCh=document.getElementsByName("hobby");
oCa.onclick=function(){
//执行全选或取消全选的功能
allcheck(oCa,oCh);
}
}
function allcheck(ac,ca){
if(ac.checked){
for(var i=0;i<ca.length;i++)
ca[i].checked=true;
}
else{
for(var i=0;i<ca.length;i++)
ca[i].checked=false;
}
}
</script>
</head>
<body>
<form action="" method="">
<input type="checkbox" name="hobby" id="">看书
<input type="checkbox" name="hobby" id="">旅游
<input type="checkbox" name="hobby" id="">运动
<input type="checkbox" name="hobby" id="">音乐
<br>
<input type="checkbox" name="allcheck" id="all">
<label for="all">全选</label>
<form>
</body>
</html>