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. JQuery实现AJAX实例

    <script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js ...

  2. java常用设计模式学习心得

    学习自:http://shenzhenchufa.blog.51cto.com/730213/161581 代码来自:http://shenzhenchufa.blog.51cto.com/73021 ...

  3. PHP定界符出现错误

    Parse error: syntax error, unexpected end of file, expecting variable (T_VARIABLE) or heredoc end (T ...

  4. git更新远程仓库代码到本地

    1 使用命令查看连接的远程的仓库 git remote -v 2 远程获取代码 git fetch origin master 如果出现 Already up-to-date 说明代码更新好了 出现 ...

  5. 四十四 常用内建模块 struct

    准确地讲,Python没有专门处理字节的数据类型.但由于str既是字符串,又可以表示字节,所以,字节数组=str.而在C语言中,我们可以很方便地用struct.union来处理字节,以及字节和int, ...

  6. CodeVS1169 传纸条 [DP补完计划]

    题目传送门 题目描述 Description 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端, ...

  7. Linux命令之telnet

    telnet [-8EFKLacdfrx] [-X authtype] [-b hostalias] [-e escapechar] [-k realm] [-l user] [-n tracefil ...

  8. 【js学习】js连接RabbitMQ达到实时消息推送

    js连接RabbitMQ达到实时消息推送 最近在自己捯饬一个网站,有一个功能是需要后端处理完数据把数据发布到MQ中,前端再从MQ中接收数据.但是前端连接MQ又成了一个问题,在网上搜了下资料,点进去一篇 ...

  9. BestCoder Round #65 (ZYB's Game)

    ZYB's Game Accepts: 672 Submissions: 1207 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536 ...

  10. Now Task

    1. Java 多线程 首先整理基本功,如线程的状态,和调度 多线程的经典例子,包括代码在内 多线程死锁的问题,要结合数据库的例子来整理 JDK1.5的若干要点 多线程的设计模式 2. NIO 需要掌 ...