实现以下功能：

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. PHP 查看安装信息

    1.运行PHP脚本,查看phpinfo函数的输出. 2.在系统环境变量Path中配好php.exe可执行文件的路径,命令管理器CMD中,执行`php.exe -i`查看. 3.在phpinfo()的输 ...

  2. hibernate整合spring事务异常

    Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushM ...

  3. Android studio 英文——中文 翻译插件

    TranslationPlugin 1.手动下载 TranslationPlugin ,在Android studio 中 2. 3. 4.选中文件,点击OK 5.设置快捷键 代号1 : 代号2 :

  4. Visual Studio Emulator for Android 的安装与使用 感觉最干净好看的模拟器.

    Step1 win8+ 6G+ 添加删除程序\ hyper  创建虚拟机 安装visual studio android 模拟器, 自带三个模拟器 使用管理员打开模拟器 参考文献 Visual Stu ...

  5. MVC 添加Area

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...

  6. 401 - 未授权：由于凭据无效，访问被拒绝”在iis的解决办法

    1.打开"IIS信息服务管理器"-->选择你发布的网站-->选择功能视图中的"身份验证"-->右键匿名身份验证,选择"编辑" ...

  7. 完全卸载AndroidStudio

    一:卸载Android Studio 由于从1.5正式版直接升级到2.1的版本,整个项目构建都变得异常的慢,所以决定卸载重新安装2.0的正式版.但是Mac下使用dmg安装的app很多都是不能使用拖拽的 ...

  8. Xcode最好用的日志打印方法

    一般打印日志都是用的系统自带的NSLog来打印的,假如项目做完了,要上线了,这些打印的日志就会很浪费性能,网上有很多的解决办法,我也是感觉网上的还是有点不方便,所以就自己又修改了一下,分享给大家. 网 ...

  9. 2016年6月20日 JAVA知识框架

    基于 J2EE 列举的知识架构,大体列举开发基础知识.帮助我随时查缺补漏,奉行好记性不如烂笔头.写了这该随笔,以便后续查询. 1  JAVA简介 2  JAVA编程环境 3  JAVA基本编程结构 4 ...

  10. 再见，OI

    你好,NOIP 2015年9月1日 正式成为了福建省莆田一中的一名高一成员 后来学校搞了选修 大家都很激动 因为自己的兴趣和特长能够得到发挥了(或者说能逃课或者看好多电影) 发现选修提供的选项中有好几 ...