<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <script src="../js/jquery1.8.3.min.js"></script>

         <title>表单操作-checkbox</title>

         <style>

             *{margin:10px}

         </style>

     </head>

     <body>

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

                你爱好的运动是？

             <br/>

             <input type="checkbox" name="items" value="足球" id="zq"/><label   for="zq">  足球</label>

             <input type="checkbox" name="items" value="篮球" id="lq"/><label   for="lq">  篮球</label>

             <input type="checkbox" name="items" value="羽毛球" id="ymq"/><label for="ymq">羽毛球</label> 羽毛球

             <input type="checkbox" name="items" value="乒乓球" id="ppq"/><label for="ppq">乒乓球</label>

             <br/>

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

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

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

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

         </form>

         <script>

             $(function(){

                 //全选

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

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

                 });

                 //全不选

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

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

                 });

                 //反选

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

                     //checkbox

                     var checkElem = $("input[name=items]");

                     /**方法一：

                     for(var i = 0; i<checkElem.length;i++){

                         checkElem[i].checked = !checkElem[i].checked;

                     }

                     **/

                     //方法二：

                     checkElem.each(function(){

                         this.checked = !this.checked;

                     });

                     /**方法三：

                     checkElem.each(function(){

                         if($(this).attr("checked")){

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

                         }else{

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

                         }

                     });

                     **/

                 });

             })

         </script>

     </body>

 </html>

jQuery全选、全不选、反选的更多相关文章

  1. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  2. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  3. jQuery实现的全选、反选和不选功能

    适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...

  4. 用jQuery实现全选-全不选-反选的功能

    临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...

  5. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  6. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

  7. jQuery实现的全选、反选和获取当前所有选中的值功能

    链接: jQuery实现的全选.反选和获取当前所有选中的值功能 <ul id="list"> <li><label><input type ...

  8. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  9. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  10. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

随机推荐

  1. Spring cookie 实战

    测试环境搭建 使用Springboot构建web server, 在测试方法中打印接收的cookie. @RestController @RequestMapping("/register/ ...

  2. PHP日志压缩下载

    主要实现了在后台查看日志列表及打包下载功能. 由于用到了PHP压缩功能,特此记录下. 压缩下载类: Hzip.php <?php /** * Created by PhpStorm. * @au ...

  3. 前端学HTTP之网关、隧道和中继

    前面的话 Web是一种强大的内容发布工具.人们已经从只在网上发送静态的在线文档,发展到共享更复杂的资源,比如数据库内容或动态生成的HTML页面.Web浏览器为用户提供了一种统一的方式来访问因特网上的内 ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（13）-系统日志和异常的处理③

    系列目录 上一节我们讲了如何捕获异常和记录日志,这一节我们讲,没有捕获的或者忘记捕获的异常包括404错误等,我们统一处理这个异常. 这一讲是利用 Application_Error 捕获所有异常,全局 ...

  5. 1. 使用Filter 作为控制器

    最近整理一下学习笔记,并且准备放到自己的博客上.也顺便把Struts2 复习一遍 1. MVC 设计模式概览 实现 MVC(Model.View.Controller) 模式的应用程序由 3 大部分构 ...

  6. 计算机程序的思维逻辑 (33) - Joda-Time

    Joda-Time上节介绍了JDK API中的日期和时间类,我们提到了JDK API的一些不足,并提到,实践中有一个广泛使用的日期和时间类库,Joda-Time,本节我们就来介绍Joda-Time.俗 ...

  7. 多线程映射工具——ThreadLocal

    ThreadLocal相当于一个Map<Thread, T>,各线程使用自己的线程对象Thread.currentThread()作为键存取数据,但ThreadLocal实际上是一个包装了 ...

  8. JavaScript学习总结(二)——闭包、IIFE、apply、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  9. 从N个元素的集合中随机取m个元素的算法实现

    最近有一个需求,比较简单,就是如标题所说的,从N个元素中随机取m个元素,当然这m个元素是不能存在重复的.本以为这么简单的需求,应该有现成的工具类来实现,但是几次查找居然没找到(有知道的可以推荐下哈^_ ...

  10. ASP.NET Core 中文文档 第三章 原理（6）全球化与本地化

    原文:Globalization and localization 作者:Rick Anderson.Damien Bowden.Bart Calixto.Nadeem Afana 翻译:谢炀(Kil ...