JQ 封装全选函数
时间:2019-03-19
本文章向大家介绍JQ 封装全选函数,主要包括JQ 封装全选函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果:
如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上
html里:
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2 "><span class="c-red">*</span>可购买者等级列表:</label>
<div class="formControls col-xs-8 col-sm-9 skin-minimal checktop">
<input type="checkbox" id="purchaser_levelAll" onclick="checkAll(this,'purchaser_level_select')" value="">
<span class="mr-5">All</span>
@foreach($memberLevleList as $vo)
<div class="check-box">
<input type="checkbox" onclick="check_isAll(this,'purchaser_level_select','purchaser_levelAll')" class="purchaser_level_select" id="purchaser_level_ids-{{$vo->id}}" name="purchaser_level_ids[]" value="{{$vo->id}}">
<label for="purchaser_level_ids-{{$vo->id}}">{{$vo->status_name}}</label>
</div>
@endforeach
</div>
</div>
js里:
//如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上
/**
* 全选:
* @author haima
* @param $this 当着元素
* @param $className 要操作的所有的select的class名字
*/
function checkAll($this,$className){
var current=$($this);
if(current.is(':checked')) {
$('.'+$className).prop('checked',true);
}else{
$('.'+$className).prop('checked',false);
}
}
/**
* @author haima
* @param $this 当前操作的元素
* @param $className 所有的select的class名字
* @param $selectname_All 选择所有的select的id名字
*/
function check_isAll($this,$className,$selectname_All){
var current=$($this); //当着元素
var selectname_All = $('#'+$selectname_All); //全选按钮的名字
if(current.is(':checked')) {
var len_num=0;
$('.'+$className).each(function(){
if(!this.checked){
selectname_All.prop('checked',false);
return false;
}else{
len_num += 1;
}
});
var len=$('.'+$className).length; //长度
if(len == len_num){
selectname_All.prop('checked',true);
}
}else{
selectname_All.prop('checked',false);
}
}
- 关于查询转换的一些简单分析(一) (r3笔记第37天)
- 简单实用的sql小技巧(第一篇) (r3笔记第36天)
- 关于修改分区表的问题总结 (r3笔记35天)
- 利用Python绘制MySQL数据图实现数据可视化
- 生产环境sql语句调优实战第九篇(r3笔记第34天)
- python数据分析之股票实战
- 使用Python编写网络爬虫抓取视频下载资源
- 通过shell定制ash脚本(r3笔记第33天)
- 使用shell定制awr脚本(r3笔记第32天)
- 用python对人们使用自行车情况分析与预测
- 由一条sql语句导致的系统IO问题(r3笔记第31天)
- 关于正则表达式第二篇(r3笔记第30天)
- 关于pl/sql的代码保护(r3笔记28天)
- Bilibili (B站)200万用户数据爬取与分析(附源码)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第35期:从 DFS 学习二叉树!(适合小白)
- ROS自平衡车案例学习(机器人操作系统+现代控制理论融合)
- Git 不能提交空目录?我也是醉了!
- 相关矩阵、特征、预测、股市!(附代码)
- CentOS7下编译安装libmodbus库
- 你还以为使用 StringBuffer 就万事大吉了?
- Windows10中VS2017环境下使用libmodbus库Modbus TCP读取设备的数据
- 记一次生产服务器进程突然消失问题排查!
- 0812-7.1.3-如何使用Ranger给HBase授权
- Redis集群方案对比:Codis、Twemproxy、Redis Cluster
- 这就是你日日夜夜想要的docker!!!---------Docker镜像制作与私有仓库建立
- 排障集锦:九九八十一难之第十八难!-----System has not been booted with systemd as init system (PID 1). Can‘t operat
- 深入了解 Flex 属性
- 如何设计一个安全的短信接口?
- ERROR Shell:396 - Failed to locate the winutils binary in the hadoop binary path java.io.IOE...