实现bootstrap表格的选择框（checkbox）的全选和单选功能

实现的方法是从网上论坛看到的，然后根据自己情况写来用的。table里面的checkbox选择框是在html里面就写好了，不是后期用js代码插入进去的。效果预览图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table表格的选择功能</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        table.table tr th,
        td {
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>

<body class="container">
    <div class=".table-responsive">
        <!--<button id="btn" class="btn btn-primary">按钮</button>-->
        <br>
        <br>
        <table id="" class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
                    </th>
                    <th>部门名称</th>
                    <th>部门负责人</th>
                    <th>联系电话</th>
                    <th>地址</th>
                    <th>操作列</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="html" lay-skin="primary" lay-filter="allChoose">
                    </td>
                    <td>信息部</td>
                    <td>张三</td>
                    <td>1395464646</td>
                    <td>XX市XX区</td>
                    <td>编辑</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="css" lay-skin="primary" lay-filter="allChoose">
                    </td>
                    <td>财务部</td>
                    <td>李四</td>
                    <td>1785454646</td>
                    <td>湖北省</td>
                    <td>添加</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="javascript" lay-skin="primary" lay-filter="allChoose">
                    </td>
                    <td>业务部</td>
                    <td>王五</td>
                    <td>13246231</td>
                    <td>湖南省</td>
                    <td>删除</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
<script>
    // $(function () {
    //     $("#btn").on('click', function () {
    //         var rows = $("table").find('tbody input[type="checkbox"]');
    //         console.log(rows);
    //         var ids = [];
    //         rows.each(function (item, index) {
    //             if (index.checked) {
    //                 ids.push(index.name);
    //             }
    //         });
    //         console.log(ids);
    //     });
    // });
    $(function () {
        checkBox();

        function checkBox() {
            var $thr = $("table thead tr"); //表格头部的tr
            var $checkAllTh = $("table thead tr").find('input').parent(); //表格头部的的全选按钮
            var $tbr = $("table tbody tr"); //表格内容的tr

            var $checkAll = $thr.find('input'); //表格头部的全选框
            //全选
            $checkAll.click(function (event) {
                //根据表格头部（thead）的全选框的是否选中的状态（true或false）来设置表格内容（tbody）的选择框状态
                $tbr.find('input').prop('checked', $(this).prop('checked'));
                if ($(this).prop('checked')) {
                    $tbr.find('input').parent().parent().addClass('danger');
                } else {
                    $tbr.find('input').parent().parent().removeClass('danger');
                }
                //防止点击事件向父元素冒泡    必须加阻止事件冒泡，不然会出现单击全选框按钮无作用的情况
                event.stopPropagation();
            });

            //点击表格头部全选框所在的单元格时也触发全选框的点击操作
            $checkAllTh.click(function () {
                $(this).find('input').click();
            });


            //点击表格内容（tbody）下面的每一行的选择框
            $tbr.find('input').click(function (event) {
                //给选中和未选中，添加和删除样式
                $(this).parent().parent().toggleClass('danger');
                //判断tbody里面的已经选中的input长度和表格内容本有的input长度是有相等，如果相等，则把theard的选择框置为选中，
                $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.find('input').length ?
                    true : false);
                event.stopPropagation(); //防止点击事件向父元素冒泡    必须加阻止事件冒泡，不然会出现单击每一行内容的选框按钮无作用的情况   
            });
            //点击tbody下面的每一行（非选择框）也能触发选择框的点击操作
            $tbr.click(function () {
                $(this).find('input').click();
            });
        }
    })
</script>