点餐选择框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>qdabc.cn</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #_head {
            background-color: green;
        }
        #_head {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrapbox">
        <table>
            <thead id="_head">
                <tr>
                    <th>
                        <input type="checkbox" id="qx">
                    </th>
                    <th>菜名</th>
                    <th>厨师</th>
                    <th>价格</th>
                </tr>
            </thead>

            <tbody id="_tbody">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>红烧鱼</td>
                    <td>张一</td>
                    <td>18</td>
                </tr>

                <tr>
                    <td> <input type="checkbox"></td>
                    <td>红烧肉</td>
                    <td>张二</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td> <input type="checkbox"></td>
                    <td>红烧狮子头</td>
                    <td>张三</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td> <input type="checkbox"></td>
                    <td>红烧小青菜</td>
                    <td>张四</td>
                    <td>18</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var qx = document.getElementById('qx');
        var tbody = document.getElementById('_tbody')
        var inputs = tbody.getElementsByTagName("input");

        qx.onclick = function () {
 
            // 点击全选 然后都被勾选上
            // 思路1:
            // if(this.checked==true){
            //      for(var i=0; i<inputs.length; i++ ){
            //     inputs[i].checked=true;
            //     // console.log( inputs[i])   
            //    }
            // }else{
            //     for(var i=0; i<inputs.length; i++){
            //         inputs[i].checked= false;
            //     }
            // }
            // 思路2:
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i]
                input.checked = qx.checked;
            }
        }
        // 点击下面选项都被勾选的的时候 上面自动被被勾选
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            input.onclick = function () {
                //  假设所有的都被选中了
                var flag = true;

                // //   下面判断下是不是所有的都被选中了
                for (var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    if (input.checked == false) {
                        flag = false;
                    }

                    if (flag == true) {
                        qx.checked = true;
                    }
                    else {
                        qx.checked = false;
                    }
                    // qx.checked=flag;    

                }

            }

        }

    </script>




</body>

</html>

欢迎分享本文,转载请保留出处:前端ABC » 点餐选择框

赞 (1)
分享到:更多 ()

发表评论 0