喜欢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. 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链

    JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...

  2. 【JS新手教程】浏览器弹出div层1

    JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...

  3. <VS2017> 编写VC++单元测试 -(一)新建单元测试工程

    开发人员自己编写单元测试是一个非常好的习惯.单元测试不但能够验证自己所编写的代码是否存在问题,避免提交给测试人员时才发现bug,也可以为将来改动代码的人提供验证代码功能正确性的途径.在我有限的工作生涯 ...

  4. 通过MSI解压缩Cab文件

    迁移自我的Github 如果只是想做类似解压缩的操作,那么可以使用如下命令行 C:\Windows\System32\expand.exe <cab file path> -F:* < ...

  5. Ubuntu14.04下Cloudera安装搭建部署大数据集群(图文分五大步详解)(博主强烈推荐)(在线或离线)

    第一步: Cloudera Manager安装之Cloudera Manager安装前准备(Ubuntu14.04)(一) 第二步: Cloudera Manager安装之时间服务器和时间客户端(Ub ...

  6. python-fifo管道文件通信

    #!/usr/bin/python #coding=utf-8 import os,sys,multiprocessing,time try: os.mkfifo('file') except :pa ...

  7. java.lang.NoClassDefFoundError: org/springframework/ui/jasperreports/JasperReportsUtils原因

    在springMVC结合jasperReporter中发现的问题 java.lang.NoClassDefFoundError: org/springframework/ui/jasperreport ...

  8. leetcode4:Permutation

    #include <utility> #include <iostream> #include <vector> #include <algorithm> ...

  9. Weblogic Maven

    从weblogic 10.3.4开始支持maven deploy部署   步骤如下: 1.构建weblogic-maven-plugin jar 在D:\oracle\Middleware\wlser ...

  10. Abschlussarbeit:Konstruktion und Implementierung von Dota2 Datenbank Intelligent Verwaltungsplatfom

    1.Die Hintergrund und Bedeutung des Themas Dank nicht ausreichendes Erkenntnisse der Spielplanner un ...