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. 洛谷 P3410 拍照

    洛谷 P3410 拍照 题目描述 小B有n个下属,现小B要带着一些下属让别人拍照. 有m个人,每个人都愿意付给小B一定钱让n个人中的一些人进行合影.如果这一些人没带齐那么就不能拍照,小B也不会得到钱. ...

  2. deeplearning.ai 人工智能行业大师访谈 Yoshua Bengio 听课笔记

    1. 如何走上人工智能的研究的?Bengio说他小时候读了很多科幻小说,1985年(64年出生,21岁)研究生阶段开始阅读神经网络方面的论文,对这个领域产生了热情. 2. 如何看深度学习这些年的发展? ...

  3. enum与typedef enum

    enum与typedef enum的用法 在程序中,可能需要为某些整数定义一个别名,我们可以利用预处理指令#define来完成这项工作,您的代码可能是: #define MON  1#define T ...

  4. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  5. [国嵌攻略][065][DM9000驱动程序设计]

    移植代码:通过已有的可用的代码修改到新环境下运行. 代码编写: 初始化网卡 1.选中网卡 nLAN_CS BWSCON(0x48000000) DW4:01 16bit BANKCON4(0x4800 ...

  6. HTTP协议简介

    一.简介 HTTP(HyperText Transfer Protocol, 超文本传输协议) 是访问互联网使用的核心通信协议,也是所有web应用程序使用的通信协议.消息模型:客户端发送请求消息,服务 ...

  7. 基于VUE的九宫格抽奖功能

    HTML代码: <template> <div class="luckDraw"> <title-bar :title="title&quo ...

  8. Java 对二值化图片识别连通域

    用Java 对 已经 二值化了的图片 标记连通域 每块的连通域都标记不一样的数字 public static void main(String [] args) throws IOException ...

  9. Java数据持久层框架 MyBatis之背景知识三

    摘录自:http://www.cnblogs.com/lcngu/p/5437281.html 对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.or ...

  10. bxslider使用教程

    bxSlider下载+参数说明 "bxSlider"就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备,适应各种屏幕: 支持多种滑动模式,水平.垂直以及淡入淡出 ...