JavaScript - WebAPI - 案例 - 点餐系统

最新推荐文章于 2023-03-17 01:42:07 发布

Henry_ww

最新推荐文章于 2023-03-17 01:42:07 发布

阅读量556

点赞数

分类专栏：案例文章标签： javascript js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119531592

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!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>

Henry_ww

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 案例 - 点餐系统

<!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" /&gt
复制链接

扫一扫