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”) ),将 ...
随机推荐
- GridView使用SimpleAdapter
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=&q ...
- Java学习的第三十二天
1. 2.综合例题没太看懂 3.明天复习第十二章
- 【译】Ringbahn的两个内存Bug
原文链接:https://without.boats/blog/two-memory-bugs-from-ringbahn/ 原文标题:Two Memory Bugs From Ringbahn 公众 ...
- 配置交换机Trunk接口流量本地优先转发(集群/堆叠)
组网图形 Eth-Trunk接口流量本地优先转发简介 在设备集群/堆叠情况下,为了保证流量的可靠传输,流量的出接口设置为Eth-Trunk接口.那么Eth-Trunk接口中必定存在跨框成员口.当集群/ ...
- PHP直播平台源码搭建教程
直播源码市场火爆,但是PHP直播平台源码的搭建过程较为复杂,本文就简单为大家概述一下直播的实现过程以及PHP直播平台源码是如何搭建的. 一.直播的定义 如今PHP直播平台源码绝大部分情况下是指在现场架 ...
- php 批量脚本检测语法错误
shell 根据参数检测 当前php项目下 的语法错误 #!/bin/bash function getdir(){ for el in `ls $1` do dir_file=$1"/&q ...
- PS中抠图的四种方法介绍
工具/原料 photoshop 软件(我用的是photoshop cc) 需要抠图的图片 开始的步骤 打开ps 打开图片,ctrl+O 魔棒抠图法 对于前景和后景有明显差别的图片用魔棒抠图法抠图比较容 ...
- 搞微服务用阿里开源的 Nacos 真香啊!
本文适合有 Java 基础知识的人群 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一款开源 Java 版可以实现动态服务发现, ...
- Torrent文件的解析与转换
Torrent简介 BitTorrent协议的种子文件(英语:Torrent file)可以保存一组文件的元数据.这种格式的文件被BitTorrent协议所定义.扩展名一般为".torren ...
- Pytest学习(七) - skip、skipif的使用
前言 作为一个java党,我还是觉得pytest和testng很像,有时候真的会感觉到代码语言在某种程度上是相通的,那么今天来说说这两个知识点. skip和skipif,见名知意,就是跳过测试呗,直白 ...