<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>

js 表格上checkbox 全选的更多相关文章

  1. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  2. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  3. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  4. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

  5. checkbox全选

    jquery代码如下(在jquery1.10.2下验证通过): <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  6. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

  7. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  8. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

随机推荐

  1. vue自定义指令 默认图片

    /**  * 检测图片是否存在  * @param url  */ function imageIsExist(url) {     return new Promise((resolve) => ...

  2. 关于LoRa安全联盟的六大常见问题

    LoRaWAN的安全机制在哪里指定? 所有安全机制都在LULA联盟规范中指定,可以由公众下载. LoRa联盟规范如何保证LoRaWAN网络的安全操作? LoRaWAN支持来源认证.完整的媒体访问控制( ...

  3. Jmeter CSV数据文件设置使用之一

    第一步: 在Jmeter 里,新建CSV数据文件设置,选择对应的文件,变量名称根据需要自己取,如bug,test,如下图所示: 第二步: 配置Jmetet 数据源,参数对应的名称要与CSV数据文件设置 ...

  4. 不吹不黑,跨平台框架AspNetCore开发实践杂谈

    前言 最近边学边做,初步上手了AspNetCore的开发,对MVC这套熟悉了一下,因为之前没有拿来做过独立项目,都是和别人合作开发,所以前后端分离,我都只做WebApi,而且还是很小的项目(课设级别) ...

  5. 白话科普系列——双十一,竟然是一场有“预谋”的DDoS攻击?

    随著互联网与信息技术的发展,所有人都在享受互联网带来的舒适和便利.如今,无论是个人社交行为,还是商业活动都早已离不开互联网. 但是,网络空间在创造机遇的同时,也带来了威胁.随着企业价值.知名度的提高. ...

  6. 监控-Cat项目部署

    一.Cat的项目背景 CAT(Central Application Tracking),是美团点评基于 Java 开发的一套开源的分布式实时监控系统.美团点评基础架构部希望在基础存储.高性能通信.大 ...

  7. VirtualBox 6 安装 CentOS 7

    1 安装环境 windows7 Oracle VM VirtualBox 6.0.24 CentOS 7 2 VirtualBox 6 - 虚拟机软件 2.1 下载 Oracle VM Virtual ...

  8. Python之Matplot——01.堆叠柱状图的绘制

    1.Matplotlib是python的一个绘图库,可以方便的绘制各种图标,是数据可视化的利器. 2.本文我就给大家介绍一下条形图或者说柱状图的绘制 3.代码如下: <1>首先导入模块 1 ...

  9. KMP算法和bfprt算法总结

    目录 1 KMP算法 1.1 KMP算法分析 1.2 KMP算法应用 题目1:旋转词 题目2:子树问题 2 bfprt算法 2.1 bfprt算法分析 2.2 bfprt算法应用 1 KMP算法 大厂 ...

  10. lseek系统调用

    文件的随机读写.目前为止,文件都是顺序访问.读写都是从当前文件的偏移位置开始,然后文件偏移值自动的增加到刚好超出读或者写结束的位置是它为下一次作好准备.在linux中有文件偏移.使得随机访问变得简单, ...