bootstrap 中的 iCheck 全选反选功能的实现
喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的。
官网: http://www.bootcss.com/p/icheck/
进入正题,iCheck提供了一些方法,可以进行全选和反选的判定。
ifChecked:输入框的状态变为 checked
ifUnchecked:checked 状态被移除
ifChanged:输入框的 checked 或 disabled 状态改变了
var checkAll =$('input.all'); //全选的input
var checkboxs =$('input.check'); //所有单选的input
checkAll.on('ifChecked ifUnchecked',function(event){
if(event.type == 'ifChecked'){
checkboxs.iCheck('check');
}else{
checkboxs.iCheck('uncheck');
}
});
checkboxs.on('ifChanged',function(event){
if(checkboxs.filter(':checked').length == checkboxs.length){
checkAll.prop('checked',true);
}else{
checkAll.prop('checked',false);
}
checkAll.iCheck('update');
})
PS:其实本人是很讨厌bootstrap的,奈何公司。。。;
之前不知道怎么写,看了各个网站,发现他们判断状态改变是这样写的

removeProp()这个方法我认为不太好,会出现无法移除的bug,说到这里就有点生气了,你说你分享你的知识的时候都不测试的吗???昂!
removeProp()用于移除由 prop() 添加的属性,不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。
可以用removeAttr(),或者 prop('checked',false)替代;
*removeAttr() 这个好像也是有点问题的,自行试试。
bootstrap 中的 iCheck 全选反选功能的实现的更多相关文章
- C# WinForm中实现CheckBox全选反选功能
今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- JS全选反选功能
总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- JQuery实现列表中复选框全选反选功能封装
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...
- jQuery实现全选反选功能
废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...
- web中的简单全选反选
<html> <body> <table> <tr> <th><input type="checkbox" onc ...
随机推荐
- QuantLib 金融计算——基本组件之 Schedule 类
目录 QuantLib 金融计算--基本组件之 Schedule 类 Schedule 对象的构造 作为"容器"的 Schedule 对象 一些常用的成员函数 如果未做特别说明,文 ...
- eclipse如何设置时常挂提示
(.qwertyuiopasdfghjklzxcvbnm)
- P3440 [POI2006]SZK-Schools
传送门 应该是很显然的费用流模型吧... $S$ 向所有学校连边,流量为 $1$,费用为 $0$(表示每个学校要选一个编号) 学校向范围内的数字连边,流量为 $1$,费用为 $c|m-m'|$(表示学 ...
- springcloud(六)-Ribbon配置自定义算法
前言 很多场景下,可能根据需要自定义Ribbon的配置,例如修改Ribbon的负载均衡规则等.Spring Cloud Edgware允许使用java代码或属性自定义Ribbon 的配置,两种方式等价 ...
- 基于Cython和内置distutils库,实现python源码加密(非混淆模式)
起因 python本身只能做混淆,不能加密,多年的商业软件开发经验导致有某种"洁癖"欲望,将py编译打包 尝试 pyinstaller原理是freeze打包pyc文件,利用工具可完 ...
- python 并发协程
一 引子 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去 ...
- windows下Composer因php_openssl扩展缺失而安装失败
Composer(https://getcomposer.org/)是PHP下的一个依赖管理工具.你可以在你的项目中声明你所需要用到的类库,然后Composer会在项目中为你安装它们.如果你了解Nod ...
- (转)LVS安装使用详解
原文:https://www.cnblogs.com/MacoLee/p/5856858.html 简介 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由 ...
- git stash使用一则
当在新的分支工作,修改的文件提交到暂存区,这时,切换到其他分之,可能报错,因为米有commit,如果切换到其他分支,暂存区的修改可能丢失,我们可以使用git stash save -a(暂存区) &q ...
- 介绍nodejs中的path模块的几个方法
webpack中常用的: var path = require('path') 是nodejs中的path模块,介绍一下webpack中常用的几个path模块的方法: 应用node环境的时候,这个pa ...