文章目录
全选练习
1. 任务
- 全选按钮
- 点击按钮以后，四个多选框全都被选中
- 全不选按钮
- 点击按钮以后，四个多选框都变成没选中的状态
- 反选按钮
- 点击按钮以后，选中的变成选中，没选中的变成选中
- 提交按钮
- 点击按钮以后，将所有选中的多选框的 value 属性值弹出
- 全选/全不选
- 当它选中时，其余的也选中，当它取消时其余的也取消
- 全选/全不选和多选框动态绑定
- 如果四个多选框全都选中，则 checkedAllBox 也应该选中
- 如果四个多选框没都选中，则 checkedAllBox 也不应该选中
JavaScript-全选练习
2. 步骤
- 获取四个多选框
- 获取全选全不选的多选框
//获取四个多选框
var items = document.getElementsByName("items");
//获取全选全不选的多选框
var checkedAllBox = document.getElementById("checkedAllBox");
2.1 #checkedAllBtn 全选按钮
点击按钮以后，四个多选框全都被选中
- 为 id 为 checkedAllBtn 的按钮绑定一个单击响应函数
- 遍历 items
- 通过多选框的 checked 属性可以来获取或设置多选框的选中状态
- 设置四个多选框变成选中状态
- 将全选全不选设置为选中
/*
* 全选按钮
* - 点击按钮以后，四个多选框全都被选中
*/
//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.2 #checkedNoBtn 全不选按钮
点击按钮以后，四个多选框都变成没选中的状态
- 为 id 为 checkedNoBtn 绑定一个单机响应函数
- 将四个多选框设置为没选中的状态
- 将全选全不选设置为不选中
/*
* 全不选按钮
* - 点击按钮以后，四个多选框都变成没选中的状态
*/
//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;
};
2.3 #checkedRevBtn 反选按钮
点击按钮以后，选中的变成选中，没选中的变成选中
- 将 checkedAllBox 设置为选中状态
- 判断多选框的状态
- 证明多选框选中，则设置为没选中状态
- 证明多选框没选中
- 判断四个多选框是否全选
- 只要有一个没选中则不是全选
- 一旦进入判断则证明不是全选状态
- 将 checkedAllBox 设置为没选中状态
- 一旦进入判断，则已经得出结果，不用继续执行循环
- 在反选时也需要判断四个多选框是否全都选中
/*
* 反选按钮
* - 点击按钮以后，选中的变成选中，没选中的变成选中
*/
//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;
//一旦进入判断，则已经得出结果，不用继续执行循环
}
}
//在反选时也需要判断四个多选框是否全都选中
};
2.4 #sendBtn 提交按钮
点击按钮以后，将所有选中的多选框的 value 属性值弹出
- 为 sendBtn 绑定单机响应函数
- 遍历 items
- 判断多选框是否选中
/*
* 提交按钮
* - 点击按钮以后，将所有选中的多选框的value属性值弹出
*/
//4.#sendBtn
//为sendBtn绑定单机响应函数
var senBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
//遍历items
for (var i = 0; i < items.length; i++) {
//判断多选框是否选中
if (items[i].checked) {
alert(items[i].value);
}
}
};
2.5 checkedAllBox 全选/全不选
当它选中时，其余的也选中，当它取消时其余的也取消
- 在事件的响应函数中，响应函数是给谁绑定的 this 就是谁
- 为 checkedAllBox 绑定单机响应函数
- 设置多选框的选中状态
//#5.checkedAllBox
/*
* 全选/全不选 多选框
* - 当它选中时，其余的也选中，当它取消时其余的也取消
*
* 在事件的响应函数中，响应函数是给谁绑定的this就是谁
*/
//为checkedAllBox绑定单机响应函数
checkedAllBox.onclick = function () {
//alert(this === checkedALLBox);
//设置多选框的选中状态
for (var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
};
2.6 items 全选/全不选和多选框动态绑定
如果四个多选框全都选中，则 checkedAllBox 也应该选中
如果四个多选框没都选中，则 checkedAllBox 也不应该选中
- 为四个多选框分别绑定单击响应函数
- 将 checkedAllBox 设置为选中状态
- 判断四个多选框是否全选
- 只要有一个没选中则不是全选
- 一旦进入判断则证明不是全选状态
- 将 checkedAllBox 设置为没选中状态
- 一旦进入判断，则已经得出结果，不用继续执行循环
//#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;
}
}
};
}
3. 完整代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选练习</title>
<script type="text/javascript">
window.onload = function () {
var items = document.getElementsByName("items");
var checkedAllBox = document.getElementById("checkedAllBox");
//1.#checkedAllBtn 全选按钮
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
items[i].checked = true;
}
checkedAllBox.checked = true;
};
//2.#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.checked = true;
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
if (!items[i].checked) {
checkedAllBox.checked = false;
}
}
};
//4.#sendBtn 提交按钮
var senBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
alert(items[i].value);
}
}
};
//#5.checkedAllBox 全选/全不选
checkedAllBox.onclick = function () {
for (var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
};
//#6.items 全选/全不选和多选框动态绑定
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
if (!items[j].checked) {
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>