如下图:

 <head>

     <title></title>

     <style type="text/css">

         div

         {

             border: 1px solid black;

             width: 300px;

             height: 100px;

             padding: 10px 10px 10px 10px;

             margin: 10px auto;

         }

     </style>

     <script src="js/jquery-1.9.0.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

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

                 //如果使用.attr()则前两次点击的时候有效,当第三次之后点击则无效了,使用.prop很好的解决了这个问题

                 $(this).siblings("input[type=checkbox]").prop("checked", this.checked);

             });

             //全选按钮

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

                 $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)").prop("checked", true);

             });

             //全不选按钮

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

                 $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)").prop("checked", false);

             });

             //反选按钮

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

                 var $chList = $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)");

                 $chList.each(function () {

                     $(this).prop("checked", !this.checked);

                 });

             });

             //提交按钮

             $("#btnSubmit").click(function (e) {

                 e.preventDefault();

                 var hobby = "您的爱好是: ";

                 var $hobbys = $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)");

                 $hobbys.each(function () {

                     // alert(this);

                     if (this.checked) {

                         hobby += this.value + " ";

                     }

                 });

                 alert(hobby);

             });

         });

     </script>

 </head>

 <body>

     <div>

         <input type="checkbox" id="checkAllorNotAll" />全选/全不选<br />

         <input type="checkbox" value="打篮球" name="che" />打篮球

         <input type="checkbox" name="che" value="踢足球" />踢足球

         <input type="checkbox" name="che" value="游泳" />游泳

         <input type="checkbox" name="che" value="唱歌" />唱歌<br />

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

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

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

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

     </div>

 </body>

jquery实现全选/全不选/反选代码

jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法的更多相关文章

  1. jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr（checked）无效的解决

    关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li cl ...

  2. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  3. 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  4. JQuery Mobile 的引用代码，以及在手机浏览器上字体太小的解决办法

    JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...

  5. ASP.NET MVC 使用jquery.form.js 异步上传 在IE下返回值被变为下载的解决办法

    错误记录: <script type="text/javascript"> $(function () { $(document).off("ajaxSend ...

  6. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  7. html input复选框的checked属性

    input --checked: 只要复选框有checked属性,不管属性值为空或者为true or false或任意值,复选框都会被选中.切忌:checked属性值不要带引号 <input t ...

  8. 关于jQuery——attr方法和prop方法获取input的checked属性操作

    经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取 ...

  9. jquery attr方法和prop方法获取input的checked属性问题

    jquery attr方法和prop方法获取input的checked属性问题   问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...

随机推荐

  1. linux 批量重命名文件

    模拟结果文件路径结构大概是:/当前目录/模型名/字模型名模拟/模拟温度/模拟结果文件. 模拟结果文件命名时相同的.模拟结果文件需要修改模拟结果文件的后缀名. 附shell脚本: find -type ...

  2. 第二天就跳票 将wikipedia上的英文词条翻译为中文 手动

    忙着改简历一整天,刚说完一天一博,就要跳票了. 还是写点东西吧. 今天又翻译了一个维基百科上的条目,刚过一天就忘了怎么弄,还得回头翻帖子.在这先记一下,省的以后找不到. 1.注册个wiki账号,轻松过 ...

  3. MySQL的基本命令

    MySQL的基本命令 启动:net start mySql; 进入:mysql -u root -p/mysql -h localhost -u root -p databaseName; 列出数据库 ...

  4. cmp比较指令对标志寄存器的影响

    比如: mov ax,x mov bx,y cmp ax,bx cmp ax,bx的逻辑含义是比较ax,bx中的值.如果执行后: ZF=1则AX=BX ZF=0则AX!=BX CF=1则AX<B ...

  5. 团体程序设计天梯赛-练习集L2-005. 集合相似度

    L2-005. 集合相似度 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定两个整数集合,它们的相似度定义为:Nc/Nt*1 ...

  6. 利用手上的UI资源（附免费UI工具包）

    http://www.uisdc.com/how-to-use-ui-kits# 大家都知道,UI工具包里有很多好看的资源:比如按钮.滑块.面包屑.播放器.表单,甚至是一个"赞!" ...

  7. poj 1487 Single-Player Games

    主要考察表达式的解析和高斯消元!!! #include<iostream> #include<stdio.h> #include<algorithm> #inclu ...

  8. c++ 基础学习： 左值 概念cocos2d-x3.0的实际应用

    左值:概念baidu 1.2.6.2 与Cocos2d-x内存管理的结合 在2.x的使用场景中,CCArray和CCDictionary通常被分配在堆上,我们不得不需要考虑在适当的地方释放其内存.新的 ...

  9. Android 自绘TextView解决提前换行问题，支持图文混排

    先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢 ...

  10. VC编程技巧：IE控件的高级用法

    一.如何显示内存中的 HTML 网页 二.屏蔽 IE 控件的上下文菜单 三.扩展 HTML 脚本中的 external 对象 四.显示 HTML 样式的对话窗 五.执行 HTML 脚本 http:// ...