<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
// 获取四个多选框items
var items = document.getElementsByName("items");
/*
* 全选
*/
//1.为id checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
for(i=0; i<items.length; i++){
items[i].checked = true;
}
};
/*
* 全不选
*/
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
for(i=0; i<items.length; i++){
items[i].checked = false;
}
};
/*
* 反选
*/
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
for(i=0; i<items.length; i++){
// if(items[i].checked == true){
// items[i].checked = false;
// }else{
// items[i].checked = true;
// }
// }
items[i].checked = !items[i].checked;
}
};
/*
* 提交
*/
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
for(i=0; i<items.length; i++){
// if(items[i].checked == true){
// items[i].checked = false;
// }else{
// items[i].checked = true;
// }
// }
if(items[i].checked == true){
alert(items[i].value)
}
}
};
/*
* 全选
*/
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
for(i=0; i<items.length; i++){
items[i].checked = this.checked
}
};
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是? <input type="checkbox" id="checkedAllBox"> 全选/全不选
<br />
<input type="checkbox" name="items" value="足球"> 足球
<input type="checkbox" name="items" value="篮球"> 篮球
<input type="checkbox" name="items" value="羽毛球"> 羽毛球
<br />
<input type="button" id="checkedAllBtn" value="全 选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反 选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
03-24
3850
3850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
