案例：点餐选择框

效果图(上传失败了,后续会补充):

 

代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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" name="" id="checkAll"/>全选/全不选
        </th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
    </tr>


</table>

<script src="common.js"></script>

</body>

<script>
    /**需求分析：1.点击上方全选/全不选选择框，实现对应功能
     * 2.点击下方选择框，如果所有选择框同时被选中，则上方全选框自动变成勾选状态，否则是非勾选状态
     *
     * 思路分析：
     *          * 1.获取界面对应元素，添加事件
     *          * 2.实现上面选择框全选全不选功能
     *          * 3.下方选择框在点击时，使用开关思想来检查是否是全部都选择的状态
     */

     //1.获取界面对应元素
    var chkAll = id("checkAll");
    var chkList = document.getElementsByName("check");

    //2.实现上方选择框全选/全不选功能
    chkAll.onclick = function () {
        //遍历下方选择框，让他们的勾选状态与自身保持一致
        for (var i = 0; i < chkList.length; i++) {
            chkList[i].checked = this.checked;
        }
    }

    //3.下方选择框点击事件
    for(var i = 0;i<chkList.length;i++){
        chkList[i].onclick = function (  ) {
            //使用开关思想来检测下方所有选择框是否被选中
            //先假设全部都是选中状态
            var isAllChecked = true;
            for(var j = 0;j<chkList.length;j++){
                //只要有一个不是选中状态，isAllChecked就为false
                if(chkList[j].checked == false){
                    isAllChecked = false;
                }
            }
            //检测完毕之后，根据开关的值来设置上方选择框的状态
            checkAll.checked = isAllChecked;
        }
    }
</script>
</html>

 

posted @ 2018-09-28 23:58  gengzhonglove  阅读(185)  评论(0)  编辑  收藏  举报