<!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百万级分页优化

    普通分页 数据分页在网页中十分多见,分页一般都是limit start,offset,然后根据页码page计算start , 这种分页在几十万的时候分页效率就会比较低了,MySQL需要从头开始一直往后 ...

  2. ubuntu安装mysql

    好记性不如烂笔头,记录一下,ubuntu安装mysql的指令. 安装MySQL: sudo apt-get install mysql-server sudo apt-get install mysq ...

  3. Android AppBar

    AppBar官方文档摘记 2016-6-12 本文摘自Android官方文档,为方便自己及其他开发者朋友阅读. 章节目录为"Develop > Training > Best P ...

  4. ReactNative入门 —— 动画篇（上）

    在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...

  5. 再来说说 LaTeX

    在我的上一篇随笔中,我提到了 Markdown.LaTeX 和 MathJax.这几个东西对目前的网络技术文章的写作.展示都有深远的影响.在上一篇中,我还给出了一份 LaTeX 语法的学习资料.在这一 ...

  6. C#的泛型的类型参数可以有带参数的构造函数的约束方式吗？

    Review后看到标题让我十分羞愧自己语文功底太差,估计...请见谅......我还特地把这句写回开头了...... 问题 前天遇到的一个问题,所以在MSDN发了个问,刚也丰富了下问题,关于泛型的. ...

  7. 快速Android开发系列通信篇之EventBus

    先吐槽一下博客园的MarkDown编辑器,推出的时候还很高兴博客园支持MarkDown了,试用了下发现支持不完善就没用了,这次这篇是在其他编辑器下写的,复制过来后发现..太烂了.怎么着作为一个技术博客 ...

  8. 高薪诚聘熟悉ABP框架的.NET高级开发工程师（2016年7月28日重发）

    招聘单位是ABP架构设计交流群(134710707)群主阳铭所在的公司-上海运图贸易有限公司 招聘岗位:.NET高级开发工程师工作地点:上海-普陀区 [公司情况]上海运图贸易有限公司,是由易迅网的创始 ...

  9. ABP框架 - 日志

    文档目录 本节内容: 服务端 获取Logger(记录器) Logger的基类 配置 Abp.Castle.Log4Net 包 客户端 服务端 ABP使用Castle Windsor的日志记录工具,它可 ...

  10. stanford corenlp的TokensRegex

    最近做一些音乐类.读物类的自然语言理解,就调研使用了下Stanford corenlp,记录下来. 功能 Stanford Corenlp是一套自然语言分析工具集包括: POS(part of spe ...