用JavaScript实现选项卡功能,当选择全选按钮的时候,下边的复选框所以按钮被选中,当取消一个复选框按钮时,全选框按钮失去效果,当再次把所有复选框按钮选择实现全选

点击全选,让下边的按钮都被选中,以及复选框的交互

简单上代码啦~~
CSS样式

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

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

        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;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

Body部分

<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="ck_all"/>全选
            </th>
            <th>课程名称</th>
            <th>讲师</th>
        </tr>
        </thead>
        <tbody id="tby">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>html</td>
            <td>文雅啊</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>css</td>
            <td>文雅啊</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>JavaScript</td>
            <td>文雅啊</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>jQuery</td>
            <td>文雅啊</td>
        </tr>
        </tbody>
    </table>
    <input type="button" value="反选" id="btn">
</div>

Sctipt部分
JQ版

<script src="js/jquery-1.12.1.js"></script>
<script>
    //jQuery的入口函数
    $(function () {
        //全选
        $('#ck_all').click(function () {
            //当前复选框的选中状态
            var flag=$(this).prop('checked');
            //修改所有的input框的选中状态
            $('#tby input').prop('checked',flag);
        });
        //复选框的交互
        $('#tby input').click(function () {
            var n1= $('#tby input').length;
            var n2= $('#tby input:checked').length;
            $('#ck_all').prop('checked',n1==n2)
        });

    });
</script>
展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值