復選框事件的處理
復選框本身也是多個組件的名字相同。所以在定義復選框的同事依然要使用document.all()取得全部的內容。
范例：操作復選框,要求是可以一個個去選擇選項，也可以直接全選，全選按鈕的狀態根據選中的選項個數自動變化，即全選按鈕的狀態會自動取消或者自動勾選。
<!doctype html>
<html lang = "zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content="this is a checkbox example">
<meta name="keywords" content="checkbox,html,js">
<title>復選框的測試</title>
<script type="text/javascript">
window.onload = function () {
//獲取復選框元素
var checkbox = document.all('checkbox');
var checkall = document.getElementById('checkAll');
/*點擊全選按鈕全部選中的情況*/
checkall.addEventListener('click',function(){
if (checkbox.length == undefined) {//一個選項時
checkbox.checked = checkall.checked;
}else{
for (var i = 0; i < checkbox.length; i++) {//多個選項時
checkbox[i].checked = this.checked;
}
}
},false);
//全部按鈕什么時候被自動選中以及自動取消
if (checkbox.length == undefined) {//一個選項時
checkbox.addEventListener('click',function(){
checkall.checked = checkbox.checked;
},false);
}else{
for (var i = 0; i < checkbox.length; i++) {//多個選項時
checkbox[i].addEventListener('click',function(){
for (var i = 0; i < checkbox.length; i++){
if (!checkbox[i].checked) {
checkall.checked = false; //全選自動取消
break;
}else{
if (i == checkbox.length -1) { checkall.checked = true;}; //全選自動勾選
}
}
},false);
}
}
//打印您所有的選擇
document.getElementById('selecteBtn').addEventListener('click',function() {
/*一個個去選擇時的情況*/
var yourchoose = "您選擇的愛好有：";
if (checkbox.length == undefined) {//一個選項時
if (checkbox.checked) yourchoose = yourchoose + checkbox.value;
}else{
for (var i = 0; i < checkbox.length; i++) {//多個選項時
if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、";
};
}
alert(yourchoose);
},false);
}
</script>
</head>
<body>
<form action="">
您的愛好有:<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="電影">電影<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="音樂">音樂<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="看書">看書<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/>
<input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/>
<input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/>
<input type="button" name="selecteBtn" id="selecteBtn" value="選擇">
</form>
</body>
</html>
效果截圖如下：
默認狀態時：
沒有全選時：
全選時：
