当点击全选按钮时,与之相关的所有选项都会被自动框选。
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<label><input type="checkbox" id="all">全选</label><br>
<label><input type="checkbox" name="fruit">香蕉</label><br>
<label><input type="checkbox" name="fruit">苹果</label><br>
<label><input type="checkbox" name="fruit">梨子</label><br>
<script>
window.onload = function() {
var all = document.getElementById("all");
var fruit = document.getElementsByName("fruit");
all.onchange = function(){
if(this.checked) {
for(var i=0;i<fruit.length;i++)
fruit[i].checked = true;
}
else {
for(var i=0;i<fruit.length;i++)
fruit[i].checked = false;
}
}
}
</script>
</body>
</html>