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

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

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

//全选
$('#allChecked').change(function(){
$('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});
//反选
$('#invertChecked').change(function(){
if($(this).is(':checked')){
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}
});
 //一键控制全选、反选、全不选
$('#orChecked').change(function(){
if($(this).is(':checked')){
var box = $('#box').children(':checkbox');
if(box.length==box.filter(':not(:checked)').length){ // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
$('#box').children(':checkbox').prop('checked',true);
}else{  // 如果有选中个数,-> 反选 
$('#box').children(':checkbox').each(function(){
$(this).prop('checked',$(this).is(':checked')?false:true);
});
}else{
$('#box').children(':checkbox').prop('checked',false); // 如控制键取消选中,剩余的checkbox也取消选中
} });
 <div align="center">

       <div id="box">
<input type="checkbox" value="1">西瓜
<input type="checkbox" value="2">芒果
<input type="checkbox" value="3">橙
<input type="checkbox" value="4">山竹
<input type="checkbox" value="5">草莓
<input type="checkbox" value="6">火龙果
</div> <br> <input type="checkbox" id="allChecked">全选
<input type="checkbox" id="invertChecked">反选
<input type="checkbox" id="orChecked">全选/反选/全不选 </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. MYSQL 索引无效和索引有效的详细介绍

    1.WHERE字句的查询条件里有不等于号(WHERE column!=...),MYSQL将无法使用索引 2.类似地,如果WHERE字句的查询条件里使用了函数(如:WHERE DAY(column)= ...

  2. MyBatis3-与Spring 4集成

    继续使用前一篇的例子http://www.cnblogs.com/EasonJim/p/7052368.html,实际项目中,通常会用Spring来管理DataSource等.充分利用Spring基于 ...

  3. 【转载】viewLoad、viewDidLoad的一些事

    viewLoad和viewDidLoad都可以用来在视图载入的时候,初始化一些内容 viewDidLoad此方法只有当view从nib文件初始化的时候才被调用.viewDidLoad用于初始化,加载时 ...

  4. redis 安装配置

    reids 安装配置 1.1 下载软件包 [root@node01 ~]# mkdir -p /data/src/ [root@node01 ~]# cd /data/src/ [root@node0 ...

  5. redis之(十五)redis的集群中的哨兵角色

    一:redis集群的哨兵的目的是什么?. (1)监控主redis和从redis数据库是否正常运行 (2)主redis出现故障,自动将其中一台从redis升级为主redis.将原先的主redis转变成从 ...

  6. 三:基于Storm的实时处理大数据的平台架构设计

    一:元数据管理器==>元数据管理器是系统平台的“大脑”,在任务调度中有着重要的作用[1]什么是元数据?--->中介数据,用于描述数据属性的数据.--->具体类型:描述数据结构,数据的 ...

  7. python运行原理/python解释器

    先Mark一下这个主题,内容待添加... 参考文章: [1]http://www.cnblogs.com/restran/p/4903056.html [2]https://blog.hakril.n ...

  8. window下线程同步之(Semaphores(信号量))

    HANDLE WINAPI CreateSemaphore( _In_opt_ LPSECURITY_ATTRIBUTES lpSemaphoreAttributes _In_ LONG lIniti ...

  9. IA32系统级架构总览(二)

    系统级架构由寄存器.数据结构.指令组成,这些设计对基本的系统级别的操作提供了支持,比如:内存管理.终端与异常处理.任务管理.多进程控制等. 我们先来看一看寄存器与数据结构的总汇图:现在你可能看不懂,不 ...

  10. [BZOJ4025] 二分图 LCT/(线段树分治+并查集)

    4025: 二分图 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2667  Solved: 989[Submit][Status][Discuss] ...