<!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>事件案例 - 点餐系统</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="checkAll" />全选/全不选</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>¥200</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>¥998</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>¥88</td>
</tr>
</table>
</body>
<script>
// 需求1:大按钮控制小按钮,1个控制多个
// 1.获取事件源
const checkAll = document.querySelector("#checkAll");
const checks = document.querySelectorAll(".check");
// console.log(checkAll, checks);
// 事件类型,点击事件.
checkAll.onclick = function () {
// 查看自己的选中状态
// console.log(this.checked);
// 遍历所有子选项
checks.forEach(function (item) {
// console.log(item);
item.checked = checkAll.checked;
});
};
// 需求2: 下面的小菜单 联合 控制上面的大菜单
// 控制逻辑: 下面全选中, 上面选中; 下面任意一个没有选中,上面都不选中
// 控制逻辑: 代码呈现, 假设法
// 给所有的子菜单添加点击事件
checks.forEach(function (item) {
// 给每次子菜单添加事件
item.onclick = function () {
// 1. 先假设: 全部都选中了: let flag = true
let flag = true;
// 2. 证明假设是成功的: 遍历所有的内容,如果有不成立的: 假设失败, 改值 flag = false
for (let i = 0; i < checks.length; i++) {
// checks[i]是每个小菜单
if (checks[i].checked === false) {
// 说明假设失败
flag = false;
// 不用继续了
break;
}
}
// console.log(flag);
// 3. 根据假设和验证的结果: flag的布尔结果判定该如何操作大菜单
checkAll.checked = flag;
};
});
// 总结
// 一个控制多个: 好做
// 多个控制1个: 很难, 假设法: 一定是先假设成立, 然后证明假设(一般都是标记 flag, 默认值为true,证明变成false)
</script>
</html>
JavaScript - WebAPI - 案例 - 点餐系统
最新推荐文章于 2022-12-29 14:18:18 发布