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. 开发高性能JAVA应用程序基础(内存篇)

    虽然Java的垃圾回收和当前高配置的服务器可以让程序员大部分时间忘掉OutOfMemoryError的存在,但是访问量增大后频繁的GC会额外消耗CPU (使用top查看结果为us值高),系统响应速度下 ...

  2. COGS 144. [USACO Dec07] 魅力手镯【01背包复习】

    144. [USACO Dec07] 魅力手镯 ★   输入文件:charm.in   输出文件:charm.out   简单对比 时间限制:1 s   内存限制:8 MB 译 by CmYkRgB1 ...

  3. UVa 10341 - Solve It【经典二分,单调性求解】

    原题: Solve the equation:         p*e-x + q*sin(x) + r*cos(x) + s*tan(x) + t*x2 + u = 0         where  ...

  4. CodeForces839-B. Game of the Rows-水题(贪心)

    最近太zz了,老是忘记带脑子... 补的以前的cf,发现脑子不好使...   B. Game of the Rows time limit per test 1 second memory limit ...

  5. Flexbox 练习和总结

    练习地址: http://flexboxfroggy.com/ Welcome to Flexbox Froggy, a game where you help Froggy and friends ...

  6. 如何在SecureCRT中给linux上传和下载文件 安装redis

    首先建立文件 /download sz和rz命令无法用.则用以下1.和2.3步骤   需要上传或者下载,需要使用rz和sz命令.如果linux上没有这两个命令工具,则需要先安装.可以使用yum安装.运 ...

  7. TI-RTOS 之 GPIO中断(按键)

    TI-RTOS 之 GPIO中断(按键) 前面已经用过LED, 定时器,这次来了解GPIO的中断是怎么用的,从CC1310+TI-RTOS的例程可以直接找到相应的例子程序,它的关键是在于要使能中断,也 ...

  8. UEP-添加表格

    UEP中添加新的表格标签:function initCustomToolBar(){ var strHtml="<table> <tr> <td id=\&qu ...

  9. 最新版redis的安装及配置 linux系统

    1.redis下载 官网地址:https://redis.io/download 百度云地址:链接:http://pan.baidu.com/s/1c1Hu2gK 密码:h17z 2.解压 [root ...

  10. dedecms_

    2012-7-5(no1)当我们点击检索结果的某个电影超链接时,如何跳转到对应的内容页[本资源由www.qinglongweb.com搜集整理] dedelist标签 --可以嵌套 项目移植: mys ...