1、复选框id.checked
可获取复选框的选中状态(true / false)
2、getElementsByName("name")
根据name获取所有元素
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var allCheck = document.getElementById("allCheck");
//根据name获取所有元素
var fruits = document.getElementsByName("fruit");
//给allCheck复选框绑定onclick事件
allCheck.onclick = function(){
//获取allCheck复选框的选中状态(返回true/false)
var checkState = allCheck.checked;
for (var i = 0; i < fruits.length; i++) {
//将allCheck复选框的状态传给每一个fruit
fruits[i].checked = checkState;
}
}
/*fruit全部选中时将allCheck也选中*/
//fruit的总数量
var all = fruits.length;
for (var i = 0; i < fruits.length; i++) {
fruits[i].onclick = function(){
var checkedCount = 0;
//总数量和选中数量相等时将allCheck选中
for (var i = 0; i < fruits.length; i++) {
if(fruits[i].checked){
checkedCount++;
}
}
//相等时返回true,不相等时返回false
allCheck.checked = (all == checkedCount);
}
}
}
</script>
<input type="checkbox" id="allCheck" />全部选中<br /><br />
<input type="checkbox" name="fruit" value="apple" />苹果<br />
<input type="checkbox" name="fruit" value="banana" />香蕉<br />
<input type="checkbox" name="fruit" value="pear" />梨<br />
</body>
</html>
点击全部选中:
取消苹果选项(全部选中复选框自动取消):
再将苹果勾选上(全部选中自动勾选):