<!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. SQL Server常见问题介绍及快速解决建议

    前言 本文旨在帮助SQL Server数据库的使用人员了解常见的问题,及快速解决这些问题.这些问题是数据库的常规管理问题,对于很多对数据库没有深入了解的朋友提供一个大概的常见问题框架. 下面一些问题是 ...

  2. 《Walking the callstack（转载）》

    本文转载自:https://www.codeproject.com/articles/11132/walking-the-callstack Download demo project with so ...

  3. SQL Server 索引和表体系结构（聚集索引）

    聚集索引 概述 关于索引和表体系结构的概念一直都是讨论比较多的话题,其中表的各种存储形式是讨论的重点,在各个网站上面也有很多关于这方面写的不错的文章,我写这篇文章的目的也是为了将所有的知识点尽可能的组 ...

  4. Java基础知识（贰）

    一.面向对象 Java中的面向对象与C#的面向对象,本质都是一样.所以对于学过C#的同学理解Java中面向对象的概念就比较轻松. 对象 定义: 万物皆对象,客观存在的事物都称为对象. 1.面向对象 类 ...

  5. 在PC上测试移动端网站和模拟手机浏览器的5大方

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...

  6. java https单向认证（忽略认证）并支持http基本认证

    https单向认证(忽略认证)并支持http基本认证, 温馨提示 1,jar包要导入对 2,有匿名类编译要注意 3,欢迎提问,拿走不谢!背景知识 Https访问的相关知识中,主要分为单向验证和双向验证 ...

  7. 移动端事件对象touches的误区

    不想长篇大论,也是自己遗留下的一个错误的理解 在移动端触屏事件有四个 // 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 tou ...

  8. Web API与OAuth：既生access token，何生refresh token

    在前一篇博文中,我们基于 ASP.NET Web API 与 OWIN OAuth 以 Resource Owner Password Credentials Grant 的授权方式( grant_t ...

  9. SQL Server-交叉联接、内部联接基础回顾（十二）

    前言 本节开始我们进入联接学习,关于连接这一块涉及的内容比较多,我们一步一步循序渐进学习,简短内容,深入的理解,Always to review the basics. 交叉联接(CROSS JOIN ...

  10. ISO日期格式标准，浏览器到服务器到mysql中的时区

    时区简单理解 https://zh.wikipedia.org/wiki/%E6%97%B6%E5%8C%BA 上面的链接是时区的wiki说明,下面说说我记住的部分: GMT时区是格林威治标准时间,我 ...