js多选的案例

最新推荐文章于 2024-05-22 13:52:22 发布

清酒独酌

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量71

点赞数

分类专栏： javascript 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/yang68668/article/details/121129460

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 500px;
            margin: 100px auto;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 24px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 20px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
            text-align: center;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="checkAll" />
                    </th>
                    <th>菜名</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧肉</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西红柿鸡蛋</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧狮子头</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>日式肥牛</td>
                </tr>
            </tbody>
        </table>
    </div>
 <!-- js代码 -->
   <script>
        /* 获取checkAll */
        var checkAll = document.getElementById('checkAll');
        /* 获取所有的input */
        var item = document.querySelectorAll('#j_tb input')
            /* 添加点击事件 */
        checkAll.onclick = function() {
                /* 遍历所有的元素框， */
                for (var i = 0; i < item.length; i++) {
                    /*  */
                    item[i].checked = this.checked;
                }
            }
            /* 为没一个复选框设置点击事件 */
        for (j = 0; j < item.length; j++) {
            item[j].onclick = function() {
                var flag = true;
                for (k = 0; k < item.length; k++) {
                    if (!item[k].checked) {
                        flag = false;
                        break;
                    }
                }
                checkAll.checked = flag;
            }
        }
    </script>

清酒独酌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js多选的案例

<style> * { padding: 0; margin: 0; } .wrap { width: 500px; margin: 100px auto; } table { border-collapse: collapse; bor.
复制链接

扫一扫