js 表格上checkbox 全选

<table class="layui-table">
        <thead>
            <tr>
                <th width="75">
                    <input type="checkbox" style="margin-right: 2px;" class="allCheck" οnclick="checkAll(this)" title="全选" id="user-all" lay-skin="primary">全选
                </th>
                <th width="50">ID</th>
                <th>企业</th>
                <th>名称</th>
                <th width="100">手机号</th>
                <th>Email</th>
                <th>类型</th>
                <th>权限</th>
                <th width="80">状态</th>
                <th width="150">接入时间</th>
                <th width="150">最后登录时间</th>
                <th width="100">操作</th>
            </tr>
        </thead>
        <tbody id="x-link">
        <?php foreach ($model as $key=>$var):?>
            <tr>
                <td>
                    <input type="checkbox" rel="sonBox" value="<?=$var->id;?>" lay-skin="primary">
                </td>
                <td><?=$var->id?></td>
                <td><?=\app\models\Company::getNameById($var->company_id);?></td>
                <td><?=$var->name?></td>
                <td><?=$var->mobile?></td>
                <td><?=$var->email?></td>
                <td><?=\app\models\User::$types[$var->type];?></td>
                <td></td>
                <td class="td-status">
                <?php if ($var->status == \app\models\Tool::JSON_STATUS_SUC):?>
                    <a class="layui-btn layui-btn-normal layui-btn-mini" id="user_status" title="确定切换状态？" href="<?=Url::to(['setstatus','id'=>$var->id])?>" data-ajax="confirm">
                        <?=\app\models\User::$statusArr[$var->status];?>
                    </a>
                <?php elseif($var->status == \app\models\Tool::JSON_STATUS_ERROR):?>
                    <a class="layui-btn layui-btn-primary layui-btn-mini" id="user_status" title="确定切换状态？" href="<?=Url::to(['setstatus','id'=>$var->id])?>" data-ajax="confirm">
                        <?=\app\models\User::$statusArr[$var->status];?>
                    </a>
                <?php else:?>
                    <a class="layui-btn layui-btn-disabled layui-btn-mini" id="user_status">
                        <?=\app\models\User::$statusArr[$var->status];?>
                    </a>
                <?php endif;?>
                </td>
                <td><?=date('Y-m-d H:i:s',$var->create_time)?></td>
                <td>
                    <?=date('Y-m-d H:i:s',$var->last_login_time)?><br>
                    登录IP：<?=$var->last_login_ip?><br>
                    登录数量：<?=$var->login_nums?>
                </td>
                <td class="layui-nav x-doing">
                    <div class="layui-nav-item">
                        <a href="<?=Url::to(['useredit','id' => $var->id])?>" data-ajax="dialog" data-width="500" data-height="600" class="layui-btn layui-btn-small">编辑</a>
                        <dl class="layui-nav-child layui-anim layui-anim-upbit">
                            <a href="<?=Url::to(['userpass','id' => $var->id])?>" data-ajax="dialog" data-width="500" data-height="200" >修改密码</a>
                            <a href="<?=Url::to(['userdel','id' => $var->id])?>" data-ajax="delete" style="text-align: center;">删除</a>
                        <?php if($var->status != -1):?>
                            <a class="layui-btn layui-btn-small layui-btn-danger" title="确定该用户已离职？" href="<?=Url::to(['setstatus', 'id'=>$var->id, 'status_1' => -1])?>" data-ajax="confirm">离职</a>
                        <?php endif;?>
                        </dl>
                    </div>
                </td>
            </tr>
        <?php endforeach;?>
        </tbody>
    </table>

<script>
var xuanzhong = [];
    var lengthTr = $("#x-link").children("tr").length;
    $(function () {
        //选中个别
        $(document).on('click','input[rel=sonBox]',function(){
            if(xuanzhong.length > 0) {
                $('.showBtn').removeClass('layui-btn-disabled');
            }
            var id = $(this).val();
            if($(this).is(':checked')) {//选中
                $('.showBtn').removeClass('layui-btn-disabled');
                xuanzhong.push(id);
                if(xuanzhong.length == lengthTr) {
                    $('#user-all').prop("checked", true);
                }
            } else {//取消选中
                for(var i in xuanzhong) {
                    if(xuanzhong[i] == id) {
                        xuanzhong.splice(i, 1);
                    }
                }
                if(xuanzhong.length == 0) {
                    $('.showBtn').addClass('layui-btn-disabled');
                }
                $('.allCheck').removeAttr('checked');
            }
        });
    });

    /**
     * 全选
     */
    function checkAll(obj) {
        if($(obj).is(':checked')) {//全选
            $('.showBtn').removeClass('layui-btn-disabled');
            var resultId = [];
            var i=0;
            $('input[rel=sonBox]').each(function(){
                $(this).prop('checked',true);
                if($(this).prop('checked')){
                    resultId[i] = $(this).val();
                    i++;
                }
            });
            xuanzhong = resultId;
            return resultId;
        } else {//取消全选
            $('.check').removeAttr('checked');
            $('.showBtn').addClass('layui-btn-disabled');
            $('input[rel=sonBox]').each(function(){
                $(this).prop('checked', false);
            });
            xuanzhong = [];
            return false;
        }
    }
</script>

 

转载于:https://www.cnblogs.com/l-zl/p/11345935.html