实现以下功能：

1：选中第一个复选框，那么下面所有的复选框都选中，去除选中第一个复选框，下面的都不选中

2：当点击全选按钮，上面足球.篮球.游泳.唱歌 全部选中

3：当点击全不选按钮，上面四个全部取消

4：当点击反选按钮，选中的变没有选中，没有选中变选中

  1.      <script type="text/javascript" src="jquery-1.8.2.min.js"></script>   //这个是文件，每一次都要看这段代码有没有写
  2.     </head>
  3.      <body>
  4.          <form method="post" action="" >
  5.              请选择你的爱好！
  6.              <br/>
  7.              <input type="checkbox" id="checkAll_2"/>全选/全不选<br/>
  8.              <input type="checkbox" name="items" value="足球"/>足球
  9.              <input type="checkbox" name="items" value="篮球"/>篮球
  10.              <input type="checkbox" name="items" value="游泳"/>游泳
  11.              <input type="checkbox" name="items" value="唱歌"/>唱歌
  12.              <br/>
  13.              <input type="button" id="checkAll" value="全选"/>
  14.              <input type="button" id="checkNo" value="全不选"/>
  15.              <input type="button" id="checkRev" value="反选"/>
  16.              <input type="button" id="send" value="提交"/>
  17.          </form>
  18.  
  19.          <script type="text/javascript">
  20.            //全选
  21.           $("#checkAll").click(function(){
  22.              $("input[name=items]").attr("checked","checked");  //$中代表选中在input标签的前提下name属性为items标签，attr代表添加属性
  23.           });
  24.  
  25.          //全不选
  26.           $("#checkNo").click(function(){
  27.              $("input[type=checkbox]").attr("checked",null); //$中代表选中在input前提下type为checkbox，把checked为null代表不选中
  28.           });
  29.          //反选
  30.          $("#checkRev").click(function(){
  31.              $("input[type=checkbox][name=items]").each(function(){ //也可以放多个属性，each这里代表迭代，迭代你选中的所有元素，因为这里满足条件的有四个
  32.  
  33.                 if(this.checked){  //.checked可以用来判断该复选框是否被选中
  34.                    $(this).attr("checked",null);
  35.                 }else{
  36.                   $(this).attr("checked","checked");
  37.                 }
  38.              });
  39.          });
  40.          //全选/全不选
  41.          $("#checkAll_2").click(function(){
  42.             if(this.checked){  //这里代表如果选中，那么下面所有都选中
  43.                $("input[type=checkbox][name=items]").attr("checked","checked");
  44.             }else{
  45.             $("input[type=checkbox][name=items]").attr("checked",null);
  46.             }
  47.          });
  48.          </script>
  49.    </body>

思考：33行中的this.checked没有加$(),而34行this为什么加$符号？

理解：如果是this那就代表它是个dom对象，而当你加上$(this)那就说明这就是一个Juery对象。

而.checked是dom对象的方法，.attr是Juery对象的方法。所有当你以后当前对象需要用到dom对象方法就用this,要用Juery对象的方法就用$(this)

功能代码（1）---通过Jquery来处理复选框的更多相关文章

  1. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  2. 案例1.通过Jquery来处理复选框

    实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...

  3. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  4. 使用JQuery做一组复选框的功能。

    之前做过复选框的功能,奈何笔记丢失,害的我又鼓捣了一番...还是博客园做笔记比较好. 假设现在有一个表格,每一行都有一个复选框按钮.在表头还有一个全选的复选框按钮. ①.当点击一个全选按钮时,下面的同 ...

  5. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  6. JQuery Mobile - 修改复选框的选中状态无效解决办法！

    今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...

  7. Jquery Datatable添加复选框，实现批量操作。

    最近一段时间,一直在写前端的东西,自己也不擅长,最近也有所长进,把工作中用到的一些前端知识整理一下,下次用到就不用再找了.这次主要是在datatable中添加复选框,然后实现批量操作的功能.因为是公司 ...

  8. 【jQuery】对于复选框操作的attr与prop

    这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...

  9. Jquery实现一组复选框单选

    完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. unity Tab键实现切换输入框功能

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...

  2. python书籍推荐：Head First Python（中文版）

    所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/64/ 来源:python黑洞网,专注 ...

  3. Invitation Cards POJ - 1511 （双向单源最短路）

    In the age of television, not many people attend theater performances. Antique Comedians of Malidine ...

  4. [CF1093E]Intersection of Permutations

    [CF1093E]Intersection of Permutations 题目大意: 给定两个长度为\(n(n\le2\times10^5)\)的排列\(A,B\).\(m(m\le2\times1 ...

  5. noi2018还没想好记

    前面说点什么.. 没想到吧 嘴上说着不写的彩笔博主最后还是写了这篇东西.. Day -inf 在雅礼集训,打了四场模拟赛.. 真正说打得好的.. 也就那么一场 身体很差 心态很差 状态很差 虽然有书读 ...

  6. MyBatis（九） 使用association定义单个对象的封装规则

    (1)接口中编写方法 public Emp getEmpandDept(); (2)编写Mapper文件 <resultMap type="com.eu.bean.Emp" ...

  7. USCiLab cereal json 序列化

    cereal json 序列化 https://blog.csdn.net/sunnyloves/article/details/51373793?utm_source=blogxgwz8 http: ...

  8. wpa_supplicant 的编译

    1. wpa_supplicant的编译需要用到的3个源码包, 分别是wpa_supplicant, openssl, libnl wpa_supplicant的下载地址:http://w1.fi/r ...

  9. iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能

    emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...

  10. idea git将多余的代码提交到本地，如何退回。

    场景:代码commit到本地仓库,还没有push到远程仓库,这时要回退代码. 介绍下Reset Head中三种Reset Type类型: 1.Mixed(默认):它回退到某个版本,本地会保留源码,回退 ...