<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. Python 为什么入门容易 精通难

    Python都说是最容易学习的编程语言,但是为什么还是有很多的小白在学习的过程中学的云里雾里,一天到晚都是报错,异常,这也怪不得会有那么多人说,学Python是从入门到入土! 其实一门编程语言不像语文 ...

  2. js 值类型与引用类型

    说明之前先提一个提问题,看一下你是怎么理解的 1. 值类型 简单的数据类型,存放在栈中 var num = 100; var num2 = num; num += 100; console.log(n ...

  3. linux中nginx中配置端口转发

    域名指向主机IP地址,通过域名:8080才能访问网站,去掉后面的8080:或者其他的端口号,直接使用域名访问网站 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...

  4. C语言之 判断语句基础与if语句反汇编

    0x01.判断语句介绍以及用法 判断语句有哪些? 1.If 用法1: if (条件) { //代码块 } 当条件成立,也就是为True时,执行{}中的代码 用法2: if(条件) { //代码块 } ...

  5. UI自动化执行时报Parent suite setup failed: SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81报错的问题解决

    持续集成在执行UI时报错:Parent suite setup failed: SessionNotCreatedException: Message: session not created: Th ...

  6. kube-proxy实现原理

    1.service概念 service是一组pod的服务抽象,相当于一组pod的LB,负责将请求分发给对应的pod.service会为这个LB提供一个IP,一般称为cluster IP.kube-pr ...

  7. 常用-DNS

    1.1.1.1 cloudflare 1.0.0.1 119.29.29.29 腾讯 114.114.114.114 114.114.115.115 114.114.114.119财务 114.114 ...

  8. python08豆瓣电影 爬虫 BeautifulSoup + Reuqests

    主要思路 请求豆瓣的链接获取网页源代码 然后使用 BeatifulSoup 拿到我们要的内容 最后就把数据存储到 excel 文件中

  9. 用数组实现队列(顺序队列&循环队列)

    用数组实现队列(顺序队列&循环队列) 顺序队列 ️ 队列(先进先出) 几个问题: 队列方法:入队.出队 队列的存储:即队首队尾两个指针, 扩容:如果队列容量不够了,应该扩容,如果队尾没有位置了 ...

  10. [MIT6.006] 22. Daynamic Programming IV: Guitar Fingering, Tetris, Super Mario Bro. 动态规划IV:吉他指弹,俄罗斯方块,超级玛丽奥

    之前我们讲到动态规划五步中有个Guessing猜,一般情况下猜有两种情况: 在猜和递归上:猜的是用于解决更大问题的子问题: 在子问题定义上:如果要猜更多,就要增加更多子问题. 下面我们来看如果像背包问 ...