点餐选择框

原创 Silly_Bo 随笔 javascript 343阅读 2017-05-05 23:19:36 举报

<!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>Document</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>html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复