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. 创建.dat文件(转载)

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

  2. maven项目的多级目录

    刚刚把一个开源的项目变成maven项目来进行管理,由于是多级的目录(以前配置的都是单级的目录),所以记录一下pom文件是怎么配置的. 一.目录结构 如下,maven的结构图,红字是表示完整的项目

  3. MySQL的读写分离---主从复制、主主复制

    1.复制是基于BinLog日志 存在三种日志格式:Statement:存储Sql语句,存储日志量是最小的.有可能复制不一致Row:存储event数据,存储日志量大,但是不能很直接进行读取:Mixed: ...

  4. cf786a

    title: CodeForces 786A Berzerk data: 2018-3-3 10:29:40 tags: 博弈论 bfs 无限 with draw copyright: true ca ...

  5. maven项目的pom.xml文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0 " 2 xmlns:xsi="http://www.w3.org ...

  6. lr_Controller界面图

    lr可用运行图介绍: lr集合点策略:

  7. cocos-js Http方式网络请求

    (转http://blog.csdn.net/sinat_28338727/article/details/52804167) 网络结构 网络结构是网络的构建方式,目前流行的有客户端服务器结构网络和点 ...

  8. IO复用之epoll系列

    epoll是什么? epoll是Linux内核为处理大批量文件描述符而作了改进的poll,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的 ...

  9. gcc、make、makefile、cmake、cmakelists区别

      文章来源:见下!   作者:辉常哥链接:https://www.zhihu.com/question/36609459/answer/89743845来源:知乎著作权归作者所有.商业转载请联系作者 ...

  10. 215. Kth Largest Element in an Array【Medium】【找到第 k 大的元素】

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...