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. 大数据Hadoop学习之了解Hadoop(1)

    关于大数据,一看就懂,一懂就懵. 大数据的发展也有些年头了,如今正走在风口浪尖上,作为小白,我也来凑一份热闹. 大数据经过多年的发展,有着不同的实现方案和分支,不过,要说大数据实现方案中的翘楚,那就是 ...

  2. CodeChef June Challenge 2017

    好气啊,本来以为比赛时间还有很多,结果回家养病两天回到学校怎么比赛就结束了(雾),大约是小高考弄错了时间? 挑3道有意思的写写题解吧. Cloning 题目大意:给一个序列,每次询问两个等长区间,问区 ...

  3. 【Java学习笔记之十三】初探Java面向对象的过程及代码实现

    理解Java面向对象的重要知识点: 一. 类,对象 类?首先举一个例子:小李设计了一张汽车设计图,然后交给生产车间来生产汽车,有黑色的.红色的.白色的... 这里,汽车设计图就是我们说的类(class ...

  4. [bzoj2462] [BeiJing2011]矩阵模板

    二维的hash.. 注意n的范围是1000........ 真相似乎是全部输出1就行了233 #include<cstdio> #include<iostream> #incl ...

  5. js onclick传递 对象

    在html onclick中如果参数直接传递一个参数js会报错. 如果想要onclick传递参数需要这么做: var user = {id:1, name:'hk'}; var ele = '< ...

  6. [国嵌笔记][033-034][设置svc模式]

    [设置svc模式] 设置CPU为SVC模式 1.因为初始化系统需要有很高的权限,SVC模式具有该权限,所以首先要使系统工作在SVC(0b10011)模式 2.设置cprs为0xd3(0b1101001 ...

  7. slice、splice与split傻傻分不清

    每每看到这几个,就蒙圈了,这都是啥呀? 既然这么容易混淆,我还是来做个小笔记吧,以便日后查阅:   1.slice(数组) 定义:slice() 方法可从已有的数组中返回选定的元素. 用法:array ...

  8. dede标签:定义文件夹

    相关函数: 文件\include\taglib\arclist.lib.php第7行 function lib_arclist(&$ctag,&$refObj)

  9. 栏目class导航

    <div id="index_nav"> <div class="index_nav"> <ul> <!-- 调用栏目 ...

  10. JDBC 元数据 (DatabaseMetaData,ResultSetMetaData )

    Java 通过JDBC获得连接以后,得到一个Connection 对象,可以从这个对象获得有关数据库管理系统的各种信息,包括数据库中的各个表,表中的各个列,数据类型,触发器,存储过程等各方面的信息.根 ...