js 表格上checkbox 全选
<table class="layui-table"> <thead> <tr> <th width="75"> <input type="checkbox" style="margin-right: 2px;" class="allCheck" onclick="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>
分类:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧