<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. IntentService下载任务

    onHandleIntent开启一个线程按顺序处理任务,不适合做大量任务 public class MainActivity extends AppCompatActivity { protected ...

  2. VMware Workstation Pro 虚拟机安装CentOS-7

    一.下载CentOS-7镜像 我是通过阿里开源镜像站下载的, 下载url:https://mirrors.aliyun.com/centos/7/isos/x86_64/ 下载CentOS-7-x86 ...

  3. Centos7 使用nginx部署vue项目

    一.安装nginx #设置源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0 ...

  4. 4G DTU比GPRS/3G DTU的优势

    4G DTU一般来说是采用电脑和数据线连接来进行参数设置的,为了适应不同的工作环境,提高工作的效率,成都远向电子4G DTU还支持远程参数配置和远程固件升级,只需一部手机即可轻松完成操作.今天我们就来 ...

  5. Java学习的第十六天

    1. 向上转型 向下转型 静态绑定 2.无问题 3.明天学习static关键字和final关键字

  6. html input只允许输入整数

    如果想想让input输入框只输入整数,直接使用以下的input就可以了 <input id="sequence" class="o_input" onke ...

  7. 分四个阶段学习python并找到一份好工作

    第一阶段 关注公众号"轻松学编程"了解更多. 详细学习资料 需要时间一个月. 1.python概念 ​ python是一种解释型.面向对象.动态数据类型的高级程序语言. ​ 理解: ...

  8. python机器学习实现K-近邻算法(KNN)

    机器学习 K-近邻算法(KNN) 关注公众号"轻松学编程"了解更多. 以下命令都是在浏览器中输入. cmd命令窗口输入:jupyter notebook 后打开浏览器输入网址htt ...

  9. JavaMail 发送邮件出现 Connection reset 问题

    问题描述 使用 java mail 发送邮件的时候,申请的 163 邮箱作为发件箱,然无论如何配置,均出现 Connection reset,无法正常发送邮件. Exception in thread ...

  10. TRUNCATE 有约束的表

    在有外键约束的情况下,truncate 表时,会报错, 我们可以设置外键检测为flase,执行完truncate命令后,再启用 SET foreign_key_checks = 0;TRUNCATE ...