Ⅰ、问题描述:
1、用JavaScript + html实现,全选按钮 和 反选按钮 的操作和功能;
2、分析:
A、用 html 做出全选按钮、反选按钮、待选菜的格式;
B、用 JavaScript 的 DOM 操作实现全选按钮和反选按钮的功能;
C、用DOM操作实现,全选待选菜以及在反选情况下全选待选菜后的,全选按钮自动被选上的操作;
Ⅱ、实现过程如下:
1、运行软件VScode,亲测可实现;
2、运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="" id="qx" />全选
<input type="checkbox" name="" id="fx" />反选
<input type="checkbox" name="q" id="">红烧肉
<input type="checkbox" name="q" id="">西红柿鸡蛋
<input type="checkbox" name="q" id="">宫保鸡丁
<input type="checkbox" name="q" id="">酸菜鱼
<input type="checkbox" name="q" id="">小炒
<script>
var qx = document.querySelector('#qx'); //通过 id 值来拿到 全选 这个元素值;
var fx = document.querySelector('#fx'); //通过 id 值来拿到 反选 这个元素值;
var qs = document.getElementsByName('q'); //通过 name 的属性名来拿到相关元素值;
console.dir(qx);
console.dir(qs);
console.dir(fx);
//实现功能:当选中全选按钮时,所有的菜的选项都被选中了;
qx.onclick = function () {
var isChecked = this.checked; //获取全选按钮的选中状态;
for (var i = 0; i < qs.length; i++) {
qs[i].checked = isChecked; //将所有菜的 checked 属性值,与全选按钮的 checked 值保持一致;(即:全选)
}
}
//实现功能:当选中反选按钮时,所有已被选中的菜都被取消,而所有未被选中的菜都被选中;
fx.onclick = function () {
for (var i = 0; i < qs.length; i++) {
qs[i].checked = !qs[i].checked;//将所有菜的 checked 属性值全取反;(即:全取反)
}
//此下代码:为了实现在全反的过程中,可能存在的菜全被选中的情况; (即:菜被全选时,全选按钮也要被选上)
count = 0;
for (var j = 0; j < qs.length; j++) {
if (qs[j].checked) {
count++;
}
}
if (count === qs.length) {
qx.checked = true;
} else {
qx.checked = false;
}
}
//实现功能:当待被选的菜已被全部选中时,那么全选按钮也要被选中;
var count = 0;
for (var i = 0; i < qs.length; i++) {
qs[i].onclick = function () {
count = 0; //保持清零的状态,因为每点击一次菜时,count 就要重新清零来计算已选中的菜的情况;(即:从而判断是否需要选中全选按钮);
for (var j = 0; j < qs.length; j++) {
if (qs[j].checked) {
count++; //用来计算被选中的菜的个数;
}
}
if (count === qs.length) {
//在被选中的菜个数与总的菜个数:在相同的情况下全选按钮就被选中,而在不相同的情况下全选按钮就不被选中;
qx.checked = true;
} else {
qx.checked = false;
}
}
}
</script>
</body>
</html>
3、结果展示:
A、在点击全选按钮的结果显示:
B、在选择一些待选菜后,再点击反选按钮的结果显示:
其一、未点击反选按钮的结果展示:
其二、点击反选按钮后的结果展示:
C、所有待选菜被选中后,全选按钮自动被选择的结果展示:
其一、还差一个菜就全选的结果展示(此时的全选按钮未被选择):
其二、所有的菜都选择后的结果展示(此时的全选按钮被选择):
D、在反选按钮被选择后,所有待选菜都被选择,该情况下的全选按钮自动被选择的结果展示:
其一、未点击反选按钮的结果展示(此时的反选按钮、全选按钮、待选菜按钮都未选中):
其二、点击反选按钮的结果展示(所有的选项都被选中了):
注意:
此时由于待选菜一个都没选中,因此点击反选按钮后,所有的待选菜都被选中了;
而由于所有的待选菜都被选中了,因此全选按钮就被选中了;
因此,最终结果是所有的显示选项都被选中了;