jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。

Hml的checkbox没有加name,只用了 div 嵌套。

如有更好的方法,望指点!!

  1. //全选
  2. $('#allChecked').change(function(){
  3. $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
  4. });
  1. //反选
  2. $('#invertChecked').change(function(){
  3. if($(this).is(':checked')){
  4. $('#box').children(':checkbox').each(function(){
  5. $(this).prop('checked',$(this).is(':checked')?false:true);
  6. });
  7. }
  8. });
  1. //一键控制全选、反选、全不选
  2. $('#orChecked').change(function(){
  3. if($(this).is(':checked')){
  4. var box = $('#box').children(':checkbox');
  5. if(box.length==box.filter(':not(:checked)').length){ // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
  6. $('#box').children(':checkbox').prop('checked',true);
  7. }else{  // 如果有选中个数,-> 反选 
  8. $('#box').children(':checkbox').each(function(){
  9. $(this).prop('checked',$(this).is(':checked')?false:true);
  10. });
  11. }else{
  12. $('#box').children(':checkbox').prop('checked',false); // 如控制键取消选中,剩余的checkbox也取消选中
  13. }
  14.  
  15. });
  1. <div align="center">
  2.  
  3. <div id="box">
  4. <input type="checkbox" value="1">西瓜
  5. <input type="checkbox" value="2">芒果
  6. <input type="checkbox" value="3">
  7. <input type="checkbox" value="4">山竹
  8. <input type="checkbox" value="5">草莓
  9. <input type="checkbox" value="6">火龙果
  10. </div>
  11.  
  12. <br>
  13.  
  14. <input type="checkbox" id="allChecked">全选
  15. <input type="checkbox" id="invertChecked">反选
  16. <input type="checkbox" id="orChecked">全选/反选/全不选
  17.  
  18. </div>

如有更好的方法,望指点!!

jquery一键控制checkbox全选,反选,全不选。的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  3. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. checkbook全选/反选/全不选

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. WPF DataGrid CheckBox 多选 反选 全选

    效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...

  7. html js 全选 反选 全不选源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  9. jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮

    法一:jquery 循环获取选中checkBox框的值 function checkeds() { $("input:checkbox").each(function(index) ...

随机推荐

  1. [hadoop][基本原理]zookeeper简单使用

    代码:https://github.com/xufeng79x/ZkClientTest 1.简介 zookeeper的基本原理和使用场景描述可参考:[hadoop][基本原理]zookeeper基本 ...

  2. C++——初识C++

    1. C关键字 auto int double long char float short signed unsigned struct union enum static switch case d ...

  3. 创建.dat文件(转载)

    比较有用的东比较有用的东西 首先,批处理文件是一个文本文件,这个文件的每一行都是一条DOS命令(大部分时候就好象我们在DOS提示符下执行的命令行一样),你可以使用DOS下的Edit或者Windows的 ...

  4. hdu 3605(二分图多重匹配)

    Escape Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  5. Redis安装+密码认证

    redis: 安装: $ wget http://download.redis.io/releases/redis-3.2.7.tar.gz $ tar xzf redis-3.2.7.tar.gz ...

  6. CentOS7安装Pycharm后无法使用日常的快捷键

    1.在百度查了一圈,原来是vim在搞鬼 楼主在安装的时候,有另外添加了vim插件,所以ctrl +c之类的键都用不了,而且每次写py文件前都要先按insert键,真坑! 2.卸载pycharm里面的v ...

  7. 【剑指offer】面试题 10. 斐波那契数列

    面试题 10. 斐波那契数列 题目一:求斐波那契数列的第n项 题目描述:求斐波拉契数列的第n项 写出一个函数,输入n,求斐波拉契(Fibonacci)数列的第n项.斐波拉契数列定义如下: C++ 实现 ...

  8. 三:Ionic Framework开发Android应用

    第一步:添加Android平台 ionic cordova platform add android 第二步:编译Android应用 中间等待的过程有点长,需要耐心等待,生成的apk此时可以复制至平板 ...

  9. 【C++】基础及引用

    输出 #include "iostream" //包含c++的头文件 //iostream.h using namespace std; //使用命名空间 std 标准的命名空间 ...

  10. phpstorm中Xdebug的使用

    目 录 1.Xdebug简介 2.Xdebug的安装.操作   2.1环境搭建 2.2配置php.ini 2.3配置PhpStorm 2.4配置PHP Debug 2.5进行调试 1.Xdebug简介 ...