您的位置：首页 > Web前端 > JavaScript
js--打卡--12.13 DOM全选练习

2017-12-13 08:10 369 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">

window.onload = function(){

//获取四个多选框items
var items = document.getElementsByName("items");
//获取全选/全不选的多选框
var checkedAllBox = document.getElementById("checkedAllBox");

/*
* 全选按钮
* 	- 点击按钮以后，四个多选框全都被选中
*/

//1.#checkedAllBtn
//为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){

//遍历items
for(var i=0 ; i<items.length ; i++){

//通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);

//设置四个多选框变成选中状态
items[i].checked = true;
}

//将全选/全不选设置为选中
checkedAllBox.checked = true;

};

/*
* 全不选按钮
* 	- 点击按钮以后，四个多选框都变成没选中的状态
*/
//2.#checkedNoBtn
//为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){

for(var i=0; i<items.length ; i++){
//将四个多选框设置为没选中的状态
items[i].checked = false;
}

//将全选/全不选设置为不选中
checkedAllBox.checked = false;

};

/*
* 反选按钮
* 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
*/
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){

//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;

for(var i=0; i<items.length ; i++){

//判断多选框状态
/*if(items[i].checked){
//证明多选框已选中，则设置为没选中状态
items[i].checked = false;
}else{
//证明多选框没选中，则设置为选中状态
items[i].checked = true;
}*/

items[i].checked = !items[i].checked;

//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
}
}

//在反选时也需要判断四个多选框是否全都选中

};

/*
* 提交按钮：
* 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
*/
//4.#sendBtn
//为sendBtn绑定单击响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
//遍历items
for(var i=0 ; i<items.length ; i++){
//判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
};

//5.#checkedAllBox
/*
* 全选/全不选 多选框
* 	- 当它选中时，其余的也选中，当它取消时其余的也取消
*
* 在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
//为checkedAllBox绑定单击响应函数
checkedAllBox.onclick = function(){

//alert(this === checkedAllBox);

//设置多选框的选中状态
for(var i=0; i <items.length ; i++){
items[i].checked = this.checked;
}

};

//6.items
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没都选中，则checkedAllBox也不应该选中
*/

//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){

//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;

for(var j=0 ; j<items.length ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}

}

};
}

};

</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="羽毛球" />羽毛球
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： js DOM
相关文章推荐
新的分享
章节导航