1、示例1:

<form>
你最爱好的运动是?
<input type="checkbox" id="CheckedAll"/>全选<br/>
<input type="checkbox" id="CheckedNo"/>全不选<br/>
<input type="checkbox" id="CheckedRev"/>反选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" id="send" value="提交"/>
</form>

全选:
$("#checkAll").click(function(){
  $.("[name=items]: checkbox").attr("checked",true);
})

全不选:
$("#checkAll").click(function(){
  $.("[name=items]: checkbox").attr("checked",false);
})

反选:
$("#checkRev").click(function(){
  $.("[name=items]: checkbox").each(function(){
    $(this).attr("checked",!$(this).attr("checked"));
  })
})
JS原生的DOM方法比创建jQuery对象更为有效、简洁,简化后代码如下:
$("#checkRev").click(function(){
  $.("[name=items]: checkbox").each(function(){
    this.checked=!this.checked;
  })
})

2、示例2:

<form>
你最爱好的运动是?
<input type="checkbox" id="CheckedAll"/>全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<input type="button" id="send" value="提交"/>
</form>

单击id为"CheckedAll"复选框后,复选框组被选中,当复选框组中有一个或者更多没有被选中时,则需要取消id为"CheckedAll"的选中状态,有如下方法实现:
a)设置一个全选中/未全选中标志位,根据标志位设置"CheckedAll"复选框选中状态
  $("[name=items]:checkbox").click(function(){
    var flag = true;
    $("[name=items]:checkbox").each(function(){
      if(!this.checked){
        flag = false;
      }
    });
  $("#CheckAll").attr("checked",flag);
})

b) 判断复选框的总数是否与选中的复选框数量相等
$("[name=items]:checkbox").click(function(){
  var $temp = $("[name=items]:checkbox");
  $("#CheckAll").attr("checked",$temp.length==$temp.filter(":checked").length);
})

jQuery应用操作之---复选框的更多相关文章

  1. jquery:获取checked复选框的问题

    jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...

  2. js操作checkbox(复选框)的方法总结

    收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...

  3. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  4. jQuery+SpringMVC中的复选框选择与传值

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...

  5. jQuery实现checkbox(复选框)选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  6. jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...

  7. JQuery、js判断复选框是否选中状态

    JQuery: var $isChecked = $("#id").is(":checked"); alert($isChecked); JS: var $id ...

  8. jQuery 获取 多个 复选框 和 javascript 对比

    $('input[name="teams"]:checked').size() // 全选 $("#quanteam").bind("click&qu ...

  9. jquery、js判断复选框是否选中

    js: if (document.getElementById("checkboxID").checked) { alert("checkobx is checked&q ...

随机推荐

  1. mongodb 聚合查询

    操作符介绍: $project:包含.排除.重命名和显示字段 $match:查询,需要同find()一样的参数 $limit:限制结果数量 $skip:忽略结果的数量 $sort:按照给定的字段排序结 ...

  2. vim中的批量替换

    VI中的批量替换   1) 文件内全部替换:   :%s#abc#123#g (如文件内有#,可用/替换,:%s/abc/123/g)     --注:把abc替换成123   (或者: %s/str ...

  3. 树莓派搭建WEB服务器

    树莓派搭建WEB的教程网上有许多,但感觉每一篇都有一些问题,这次我将网上的教程汇总,并亲身实践,将注意的问题都写进去,方便新手学习! 目录:1,安装nginx+sqlite+php5打造轻量级服务器, ...

  4. [51nod1329]路径游戏

    Snuke与Sothe两个人在玩一个游戏.游戏在一个2*N的网格中进行(2行N列),这个网格中的2N个格子不是黑色就是白色.定义,一条有效路径是指一个完全由白色格子构成的序列,这个序列的第一个网格元素 ...

  5. 2017 ECJTU ACM 程序设计竞赛

    大厦 Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submission ...

  6. 【原创】最新的"答题热"中,前端的一点小工作

    一.前言 据王思聪引爆全民HQ也3个星期了,总结下最新做的一个有关"答题热"的工具.并借由这个工具的开发,分析当下HybridApp中H5的一些技术. 在百万英雄等节目刚出来的时候 ...

  7. 史上最全最强Charles截取手机https协议数据包教程(附上利用此技术制作最近微信比较火的头脑王者辅助外挂)!

    纯原创,思路也是本人花了半个小时整理出来的,整个完成花费了本人半天时间,由于不才刚大学毕业,所以有的编码方面可能不入大牛们的眼,敬请原谅!如有转载请附上本地址,谢谢! 最近微信朋友圈刚刚被跳一跳血洗, ...

  8. 久未更 ~ 二之 —— TextView 文字省略

    > > > > > 久未更 系列一:关于TextView内容超过n行文尾省略问题 //在 TextView 中 实现 超过n行省略 为.. 可用以下属性 实现 andro ...

  9. es6语法部分浏览器支持引发的坑

    es2015部分浏览器支持踩的坑 自从es2015出现以来,以其更丰富的api和简介的语法,使得js功能越来越丰富写起来也更便捷.比较早先的时候,浏览器是完全不支持的,我们使用的时候,必须要使用bab ...

  10. 用thinkphp开启伪静态,用wamp开启很快搞定;但是用phpstudy总是开启失败,为什么?

    https://segmentfault.com/q/1010000005100662 thinkphp应用的根目录下.htaccess中的内容是: <IfModule mod_rewrite. ...