js案例-3 复选框checkbox的全选返回控制

最新推荐文章于 2021-04-19 18:44:08 发布

心郎

最新推荐文章于 2021-04-19 18:44:08 发布

阅读量509

点赞数

分类专栏：前端_js_案例

本文链接：https://blog.csdn.net/u011301203/article/details/52435997

版权

前端_js_案例专栏收录该内容

22 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        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 "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

    <script>

        window.onload = function () {
        // 需求1：点击上面的的input，下面全选或者反选。
        // 思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，
        //      如果是true，下面的全部变成true；false同理。

            var topInp = document.getElementById("theadInp");
            var tbody = document.getElementById("tbody");
            var botInpArr = tbody.getElementsByTagName("input");

            //全选或全反选
            topInp.onclick = function () {
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }

            //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
            //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
            // checked属性值是否全部都是true，如果有一个是false，
            // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；

            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {
                    //开闭原则
                    var bool = true;
                    //检测每一个input的checked属性值。
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked === false){
                            bool = false;
                            break;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

    </script>

</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="theadInp" />
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>地三鲜</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>西红柿鸡蛋</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>醋溜土豆丝</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>萝卜干炒黄豆儿</td>
            <td>田老师</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>