<!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. Java实现FTP文件与文件夹的上传和下载

    Java实现FTP文件与文件夹的上传和下载 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制 ...

  2. windows下的命令行工具babun

    什么是babun babun是windows上的一个第三方shell,在这个shell上面你可以使用几乎所有linux,unix上面的命令,他几乎可以取代windows的shell.用官方的题目说就是 ...

  3. jmeter之线程组的使用

    线程组 在使用jmeter性能测试时,我们都得先添加个线程组,右键testplan-->添加-->Threads-->线程组.在线程组下执行. 问题:为了能够让jmeter在做性能测 ...

  4. 第14章 Linux启动管理（1）_系统运行级别

    1. CentOS 6.x 启动管理 (1)系统运行级别 ①运行级别 运行级别 含义 0 关机 1 单用户模式,可以想象为Windows的安全模式,主要用于系统修复.(但不是Linux的安全模式) 2 ...

  5. Java集合---ConcurrentHashMap原理分析

    集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...

  6. 机器指令翻译成 JavaScript —— 终极目标

    上一篇,我们顺利将 6502 指令翻译成 C 代码,并演示了一个案例. 现在,我们来完成最后的目标 -- 转换成 JavaScript. 中间码输出 我们之所以选择 C,就是为了使用 LLVM.现在来 ...

  7. ABP框架 - 启动配置

    文档目录 本节内容: 配置ABP 替换内置服务 配置模块 为一个模块创建配置 ABP在启动时,提供基础框架和模型来配置和模块化. 置ABP 在预初始化事件中进行配置,示例: kid1412注:XmlL ...

  8. 【java】jstack

    介绍 jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jsta ...

  9. nfs 笔记 2

    http://woxihuanpes.blog.163.com/blog/static/12423219820097139145238/ http://blog.csdn.net/willvc123/ ...

  10. 设计C/S架构应用程序的并发功能

    C/S架构的ERP.CRM程序有的是以并发点(Concurrency)来销售,并发点是指同时在线人数.并发数量大时,理论上程序的运行速度会慢,软件供应商(vendor)也以控制并发的上限以解决客户对系 ...