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>
點擊全部選中:
取消蘋果選項(全部選中復選框自動取消):
再將蘋果勾選上(全部選中自動勾選):