JavaScript：複選框事件的處理
阿新 • • 發佈：2019-01-29
<!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'); //document.all[name]獲得
var checkall = document.getElementById('checkAll');
/*點選全選按鈕全部選中的情況*/
checkall.addEventListener('click',function(){
if (checkbox.length == undefined) {//一個選項時，長度是undefined；
checkbox.checked = checkall.checked;
}else{
for (var i = 0; i < checkbox.length; i++) {//多個選項時
checkbox[i].checked = this.checked;//this指代checkall,checkall選中，將true賦給checkbox[i].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>
<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'); //document.all[name]獲得
var checkall = document.getElementById('checkAll');
/*點選全選按鈕全部選中的情況*/
checkall.addEventListener('click',function(){
if (checkbox.length == undefined) {//一個選項時，長度是undefined；
checkbox.checked = checkall.checked;
}else{
for (var i = 0; i < checkbox.length; i++) {//多個選項時
checkbox[i].checked = this.checked;//this指代checkall,checkall選中，將true賦給checkbox[i].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>