<!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. 如何理解MySQL中auto_increment?

    1.auto_increment用于主键自动增长.比如从1开始增长,当把第一条数据删除,再插入第二条数据时,主键值为2,不是1.

  2. 关押罪犯 and 食物链（并查集）

    题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用"怨气值"( ...

  3. 利用HAProxy代理SQL Server的AlwaysOn辅助副本

    利用HAProxy代理SQL Server的AlwaysOn辅助副本 公司最近数据库升级到SQL Server2014 ,并部署了alwayson高可用集群 机房内有三套程序需要读取数据库 第一套:主 ...

  4. Linux学习日记(二)

    在linux上运行.Net程序 并安装Linux网站 一.环境 ubuntu14.10(桌面版 官网下载的最新版) jexus5.6.3 正式版 MonoDevloper (安装完后里面有个Ubunt ...

  5. Android笔记——BaseAdapter的使用

    Android中的适配器(Adapter)是数据与视图(View)之间的桥梁,用于对要显示的数据进行处理,并通过绑定到组件进行数据的显示. BaseAdapter是Android应用程序中经常用到的基 ...

  6. WCF学习之旅—WCF服务部署到应用程序（十）

    上接  WCF学习之旅—WCF寄宿前的准备(八) WCF学习之旅—WCF服务部署到IIS7.5(九) 五.控制台应用程序宿主 (1) 在解决方案下新建控制台输出项目 ConsoleHosting.如下 ...

  7. SQL Server 批量主分区备份（Multiple Jobs）

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 案例分析(Case) 方案一(Solution One) 方案二(Solution Two) ...

  8. Android动画效果之Frame Animation（逐帧动画）

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  9. meta标签

    参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...

  10. AJAX（一）

    AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...