喜欢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 全选反选功能的实现的更多相关文章

  1. C# WinForm中实现CheckBox全选反选功能

    今天一群里有人问到这个功能,其实应该挺简单,但提问题的人问题的出发点并没有描述清楚.因此,一个简简单单的需求,就引起了群内热烈的讨论.下面看看这个功能如何去实现,先上效果: 下面直接上代码,请不要在意 ...

  2. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  4. 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

    近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...

  5. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  6. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  7. JQuery实现列表中复选框全选反选功能封装

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...

  8. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  9. web中的简单全选反选

    <html> <body> <table> <tr> <th><input type="checkbox" onc ...

随机推荐

  1. 根据域名获取ip地址gethostbyname

    #include <sys/socket.h> #include <stdio.h> #include <netdb.h> int main(int argc, c ...

  2. word中手动添加endnote的加载项

    用Endnote管理文献,在写作的同时插入引文,这对于写文章的朋友们来说太重要了.我今天遇到这个问题,花时间钻研了,觉得应该记录下来,相信也会方便大家.查了网上许多帖子依然不得解,可能是Word版本变 ...

  3. [转] Linux History(历史)命令用法 15 例

    [From]https://linuxtoy.org/archives/history-command-usage-examples.html 如果你经常使用 Linux 命令行,那么使用 histo ...

  4. Django 登陆注册实现

    路由层 from django.conf.urls import url from django.contrib import admin from app01 import views urlpat ...

  5. Q72 编辑距离

    给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 示例 1: 输 ...

  6. (转)2017年Linux运维人员必会开源运维工具体系

    标签:操作系统 中间件 千里马 Linux 技能 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51ct ...

  7. shiro学习笔记_0600_自定义realm实现授权

    博客shiro学习笔记_0400_自定义Realm实现身份认证 介绍了认证,这里介绍授权. 1,仅仅通过配置文件来指定权限不够灵活且不方便.在实际的应用中大多数情况下都是将用户信息,角色信息,权限信息 ...

  8. 09 jdk1.5的并发容器:ConcurrentHashMap

    一 概述 JDK5中添加了新的concurrent包,相对同步容器而言,并发容器通过一些机制改进了并发性能 因为同步容器将所有对容器状态的访问都串行化了,这样保证了线程的安全性,所以这种方法的代价就是 ...

  9. 非科班双非本科投的337家Java后台(励志)

    考试结束,班级平均分只拿到了年级第二,班主任于是问道:大家都知道世界第一高峰珠穆朗玛峰,有人知道世界第二高峰是什么吗?正当班主任要继续发话,只听到角落默默想起来一个声音:”乔戈里峰” 前言 文章出自h ...

  10. 一道百度的java面试题的几种解法

    考试结束,班级平均分只拿到了年级第二,班主任于是问道:大家都知道世界第一高峰珠穆朗玛峰,有人知道世界第二高峰是什么吗?正当班主任要继续发话,只听到角落默默想起来一个声音:”乔戈里峰” 前言 文章出自: ...