实现以下功能：

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点击复选框触发事件给input赋值

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

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

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

  3. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

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

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

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

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

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

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

  7. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jquery关于checkbox复选框是否被选中的问题

    本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都 ...

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

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

随机推荐

  1. jQuery插件开发代码

    方法和原理在这篇博文中非常详细易懂 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 下面整理下基本知识点和基本的代码段: jQue ...

  2. 使用Java的Frame类编写的QQ登录界面

    public static void main(String[] args) { Frame f = new Frame(); //关闭窗体 f.addWindowListener(new Windo ...

  3. ffmpeg-20160929-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...

  4. js_事件委托

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  5. 出售Illustrator脚本插件面板（包含面板源码，以及面板上所有的功能源码）

    出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...

  6. xcode 8 重新支持插件

    苹果出了Xcode8之后,就加了签名让之前的自定义插件无法继续的安装使用.想要重新使用插件的话只要用自己的签名覆盖苹果的签名即可. 1.创建自签名证书 钥匙串->钥匙串访问->证书助理-& ...

  7. SQLServer 2008 R2 对同时含有数字和中文的字段进行排序

    若是数据库中的某一个字段名为bedNO,类型为nvchar,里面有{1,2,3,11,12,23,加2,加3}这些数据. 此时我需要对这些数据进行排序,数字按大小拍前面,汉字按第一个字拼音首字母的顺序 ...

  8. C#设计模式之原型模式

    原型模式:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象. 分析: 孙悟空:根据自己的形状复制(克隆)出多个身外身 软件开发:通过复制一个原型对象得到多个与原型对象一模一样的新对 ...

  9. iOS之滑动隐藏导航

    滑动隐藏导航狼栏 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offsetY = scrollView.content ...

  10. 如何在vim里删除空行？

    删除空行,进入底行模式 :g/^$/d ^代表首列 $代表尾列 d代表删除 g代表全局替换