bootstrap 多选按钮实现方式，js,jQuery删除数组中指定元素

版权声明：本文为博主原创文章，转载请标注出处，谢谢。 https://blog.csdn.net/qq_33182756/article/details/83900045

bootstrap有许多，非常漂亮的设计，不用自己苦恼于css 的使用。

bootstrap使用，实现多选方法：

1、使用bootstrap的表格标签，表格内容为PHP返回前端数据，

<table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>时间</th>
                <th>报警组</th>
                <th>报警标题</th>
                <th>处理状态</th>
            </tr>
            </thead>
            <tbody>
            @foreach( $lista as $vo )
                <tr id="{{$vo->id}}">
                    <td height="40" style="border-bottom:dotted #000000 1px; font-size:14px; color:#000000;">
                        &nbsp;{{$vo->datetime}}</td>
                    <td style="border-bottom:dotted #000000 1px; font-size:14px; color:#000000;">
                        &nbsp;{{$vo->groups}}</td>
                    <td style="border-bottom:dotted #000000 1px; font-size:14px; color:#000000;">&nbsp;<a
                                href="{{url('showinfo/'.$vo->id)}}" target="main">{{$vo->title}}</a></td>
                    <td style="border-bottom:dotted #000000 1px; font-size:14px; color:#000000;">&nbsp;
                        <a href="#" onclick="aaa({{$vo->id}},'{{$vo->method}}')">{{$vo->status}}</a>
                    </td>
                    @endforeach
                </tr>
            </tbody>
        </table>

2、实现多选的jQuery方法：

        initTableCheckbox();
        var $Ids = [];
        function initTableCheckbox() {
            var $thr = $('table thead tr');
            var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
            /*将全选/反选复选框添加到表头最前，即增加一列*/
            $thr.prepend($checkAllTh);
            /*“全选/反选”复选框*/
            var $checkAll = $thr.find('input');
            $checkAll.click(function (event) {
                /*将所有行的选中状态设成全选框的选中状态*/
                $tbr.find('input').prop('checked', $(this).prop('checked'));
                /*并调整所有选中行的CSS样式*/
                if ($(this).prop('checked')) {
                    $tbr.find('input').parent().parent().addClass('warning');
                    $tbr.find('input').parent().parent().each(function(){
                        $id = $(this).attr('id');
                        addIds($id);
                        console.log($Ids);
                    });
                } else {
                    $tbr.find('input').parent().parent().removeClass('warning');
                    $Ids = [];
                }
                /*阻止向上冒泡，以防再次触发点击操作*/
                event.stopPropagation();
            });
            /*点击全选框所在单元格时也触发全选框的点击操作*/
            $checkAllTh.click(function () {
                $(this).find('input').click();
            });
            var $tbr = $('table tbody tr');
            var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
            /*每一行都在最前面插入一个选中复选框的单元格*/
            $tbr.prepend($checkItemTd);
            /*点击每一行的选中复选框时*/
            $tbr.find('input').click(function (event) {
                var $id = $(this).parent().parent().attr('id');
                addIds($id);
                console.log($Ids);
                /*调整选中行的CSS样式*/
                $(this).parent().parent().toggleClass('warning');
                /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
                $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.length ? true : false);
                /*阻止向上冒泡，以防再次触发点击操作*/
                event.stopPropagation();
            });
            /*点击每一行时也触发该行的选中操作*/
            $tbr.click(function () {
                $(this).find('input').click();
            });
        }

3、其中的addIds方法，是为了获取到点击多选框之后，当前数据的id，方便批量操作。如下：

function addIds(val) {
            var $flag = 0;
            for (var $j = 0; $j < $Ids.length; $j++) {
                if ($Ids[$j] == val) {
                    console.log(val);
                    $Ids.remove(val);
                    $flag = 1;
                }
            }
            if ($flag !== 1) {
                $Ids.push(val);
            }
        }

4、在addIds方法中，remove()方法，去掉数组中，指定的元素，需要自己编写。如下：

Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };

5、js中，去除指定下标的数组的数据方法：整理如下：

Array.prototype.remove = function (dx) {
            if (isNaN(dx) || dx > this.length) {
                return false;
            }
            for (var i = 0, n = 0; i < this.length; i++) {
                if (this[i] != this[dx]) {
                    this[n++] = this[i]
                }
            }
            this.length -= 1
        }