用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>