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>
js 表格上checkbox 全选的更多相关文章
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
- Jquery学习之路(一) 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...
- checkbox全选
jquery代码如下(在jquery1.10.2下验证通过): <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- checkbox全选与反选
用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
随机推荐
- JDK源码阅读-------自学笔记(二十五)(java.util.Vector 自定义讲解)
Vector 向量 Vector简述 1).Vector底层是用数组实现的List 2).虽然线程安全,但是效率低,所以并不是安全就是好的 3).底层大量方法添加synchronized同步标记,sy ...
- Python期中考试程序设计题详解-2
一.请使用turtle库的turtle.pencolor().turtle.seth().turtle.fd()等函数,绘制一个边长为200的红色等边三角形. 题目解析: (1)本题利用turtle画 ...
- Luogu P2447 [SDOI2010]外星千足虫
题意 给定 \(n\) 个变量和 \(m\) 个异或方程,求最少需要多少个才能确定每个变量的解. \(\texttt{Data Range:}1\leq n\leq 10^3,1\leq m\leq ...
- C# 实现十六进制Unicode编码字符串转换为汉字
网上找了几个方法,但是运行之后会报错,提示要解析的字符串格式不正确.然后我猜想可能是传入的字符串 \u60a8\u4eca\u65e5\u5df2\u7b7e\u5230 中带"\" ...
- php socket通信的简单实现
socket通信的原理在这里就不说了,它的用途还是比较广泛的,我们可以使用socket来做一个API接口出来,也可以使用socket来实现两个程序之间的通信,我们来研究一下在php里面如何实现sock ...
- PASS模型-第一周个人总结
目录 PASS模型-第一周个人报告 1.个人任务 2.个人工作内容 2.1 登陆界面 2.2 信息采集 2.3 视觉搜索 3.个人小结 3.1 收获 3.2 优化 PASS模型-第一周个人报告 博客班 ...
- 搞微服务用阿里开源的 Nacos 真香啊!
本文适合有 Java 基础知识的人群 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一款开源 Java 版可以实现动态服务发现, ...
- Assert类的静态方法
五:常用断言 在NUnit中,断言是单元测试的核心.NUnit提供了一组丰富的断言,这些断言是Assert类的静态方法.如果一个断言失败,方法的调用不会返回值,并且会报告一个错误.如果一个测试包含多个 ...
- svn“Previous operation has not finished; run 'cleanup' if it was interrupted“报错的解决方案
今天SVN提交代码遇到"Previous operation has not finished; run 'cleanup' if it was interrupted"报错,&q ...
- tcpack--3快速确认模式
接收到数据报后,会调用tcp_event_data_recv(),不管是在慢速路径的tcp_data_queue中调用还是 在快速路径中处理接收数据后直接调用,注意(如果len <= tcp_h ...