实现以下功能：

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

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

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

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

     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>   //这个是文件，每一次都要看这段代码有没有写

    </head>

     <body>

         <form method="post" action="" >

             请选择你的爱好！

             <br/>

             <input type="checkbox" id="checkAll_2"/>全选/全不选<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="唱歌"/>唱歌

             <br/>

             <input type="button" id="checkAll" value="全选"/>

             <input type="button" id="checkNo" value="全不选"/>

             <input type="button" id="checkRev" value="反选"/>

             <input type="button" id="send" value="提交"/>

         </form>

         <script type="text/javascript">

           //全选

          $("#checkAll").click(function(){

             $("input[name=items]").attr("checked","checked");  //$中代表选中在input标签的前提下name属性为items标签，attr代表添加属性

          });

         //全不选

          $("#checkNo").click(function(){

             $("input[type=checkbox]").attr("checked",null); //$中代表选中在input前提下type为checkbox，把checked为null代表不选中

          });

         //反选

         $("#checkRev").click(function(){

             $("input[type=checkbox][name=items]").each(function(){ //也可以放多个属性，each这里代表迭代，迭代你选中的所有元素，因为这里满足条件的有四个

                if(this.checked){  //.checked可以用来判断该复选框是否被选中

                   $(this).attr("checked",null);

                }else{

                  $(this).attr("checked","checked");

                }

             });

         });

         //全选/全不选

         $("#checkAll_2").click(function(){

            if(this.checked){  //这里代表如果选中，那么下面所有都选中

               $("input[type=checkbox][name=items]").attr("checked","checked");

            }else{

            $("input[type=checkbox][name=items]").attr("checked",null);

            }

         });

         </script>

   </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. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  2. iOS 9之后Url链接的NSUTF8StringEncoding转码实现

    在iOS中通过WebView加载Url或者请求HTTP时,若是链接中包含中文.特殊符号&%或是空格等都需要预先进行一下转码才可正常访问. 许久没编码,原先的方法已废弃了都,在此对应当前最新的方 ...

  3. scrapy的持久化相关

    终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作. 需求是:将糗百首页中段子的内容和标 ...

  4. [Educational Round 10][Codeforces 652F. Ants on a Circle]

    题目连接:652F - Ants on a Circle 题目大意:\(n\)个蚂蚁在一个大小为\(m\)的圆上,每个蚂蚁有他的初始位置及初始面向,每个单位时间蚂蚁会朝着当前面向移动一个单位长度,在遇 ...

  5. JAVA---MYSQL 基本知识点 第二部分

    增删改查 (CRUD):   数据库  , 表  , 记录  ;   约束 ; 主键约束 :primary key  如果是int类型 可以使用 自动增长型  auto_increment; 唯一约束 ...

  6. 初识CUDA

    如果问题规模较小,逻辑控制较为复杂,并行性很小优先使用CPU处理该问题,如果包含较大规模的数据处理,则考虑使用GPU进行处理. CPU上线程是重量级实体,可以开启1~32个线程,且上下文切换较为缓慢, ...

  7. CASE WHEN 高阶用法?

    两个表做关联时,以左表为准,若左表某列不为空,则与右表对应列进行关联匹配,为空则不做匹配. 以上做法,有一种说不出来的感觉,不管怎样,问题是解决了. 如有更好的解决思路,请留言告知,不甚感激!

  8. travis-ci 中运行 puppeteer

    通过 travis-ci 可以构建基于 puppeteer 的自动化任务,基于此构建的一个 计划任务 puppeteer中调用需要禁用沙箱环境 https://github.com/GoogleChr ...

  9. OSGi类加载流程

    思路 OSGi每个模块都有自己独立的classpath.如何实现这一点呢?是因为OSGi采取了不同的类加载机制: OSGi为每个bundle提供一个类加载器,该加载器能够看到bundle Jar文件内 ...

  10. [Swift]LeetCode51. N皇后 | N-Queens

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...