Bootstrap之表格checkbox复选框全选 [转]

转自: http://blog.csdn.net/shangmingchao/article/details/49761315

效果图：

HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了：

<table class="table table-bordered table-hover">
    <thead>
        <tr class="success">
            <th>类别编号</th>
            <th>类别名称</th>
            <th>类别组</th>
            <th>状态</th>
            <th>说明</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>C00001</td>
            <td>机车</td>
            <td>机车</td>
            <td>有效</td>
            <td>机车头</td>
        </tr>
        <tr>
            <td>C00002</td>
            <td>车厢</td>
            <td>机车</td>
            <td>有效</td>
            <td>载客车厢</td>
        </tr>
    </tbody>
</table>

重点是JS的实现。复选框很小，不容易点到，所以点击每一行也可以选中该行，并用高亮一些CSS样式表示。点击复选框所在单元格也能选中复选框。下面是完整代码和注释说明：

[html] view plain copy