Ⅰ、问题描述：
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、在反选按钮被选择后，所有待选菜都被选择，该情况下的全选按钮自动被选择的结果展示：
其一、未点击反选按钮的结果展示(此时的反选按钮、全选按钮、待选菜按钮都未选中)：
其二、点击反选按钮的结果展示(所有的选项都被选中了):
注意：
此时由于待选菜一个都没选中，因此点击反选按钮后，所有的待选菜都被选中了；
而由于所有的待选菜都被选中了，因此全选按钮就被选中了；
因此，最终结果是所有的显示选项都被选中了；
