如下图:

  1. <head>
  2. <title></title>
  3. <style type="text/css">
  4. div
  5. {
  6. border: 1px solid black;
  7. width: 300px;
  8. height: 100px;
  9. padding: 10px 10px 10px 10px;
  10. margin: 10px auto;
  11. }
  12. </style>
  13. <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
  14. <script type="text/javascript">
  15. $(function () {
  16. $("#checkAllorNotAll").click(function () {
  17. //如果使用.attr()则前两次点击的时候有效,当第三次之后点击则无效了,使用.prop很好的解决了这个问题
  18. $(this).siblings("input[type=checkbox]").prop("checked", this.checked);
  19. });
  20.  
  21. //全选按钮
  22. $("#checkAll").click(function () {
  23. $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)").prop("checked", true);
  24. });
  25.  
  26. //全不选按钮
  27. $("#checkNotAll").click(function () {
  28. $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)").prop("checked", false);
  29. });
  30.  
  31. //反选按钮
  32. $("#checkFan").click(function () {
  33. var $chList = $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)");
  34. $chList.each(function () {
  35. $(this).prop("checked", !this.checked);
  36. });
  37. });
  38.  
  39. //提交按钮
  40. $("#btnSubmit").click(function (e) {
  41. e.preventDefault();
  42. var hobby = "您的爱好是: ";
  43. var $hobbys = $(this).siblings("input[type=checkbox]:not(#checkAllorNotAll)");
  44. $hobbys.each(function () {
  45. // alert(this);
  46. if (this.checked) {
  47. hobby += this.value + " ";
  48. }
  49. });
  50. alert(hobby);
  51. });
  52. });
  53. </script>
  54. </head>
  55. <body>
  56. <div>
  57. <input type="checkbox" id="checkAllorNotAll" />全选/全不选<br />
  58. <input type="checkbox" value="打篮球" name="che" />打篮球
  59. <input type="checkbox" name="che" value="踢足球" />踢足球
  60. <input type="checkbox" name="che" value="游泳" />游泳
  61. <input type="checkbox" name="che" value="唱歌" />唱歌<br />
  62. <input type="button" id="checkAll" value="全选" />
  63. <input type="button" id="checkNotAll" value="全不选" />
  64. <input type="button" id="checkFan" value="反选" />
  65. <input type="button" id="btnSubmit" value="提交" />
  66. </div>
  67. </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. Android Studio 单刷《第一行代码》系列目录

    前言(Prologue) 本系列将使用 Android Studio 将<第一行代码>(书中讲解案例使用Eclipse)刷一遍,旨在为想入坑 Android 开发,并选择 Android ...

  2. 在js中获取easyui datagrid的数据

    可以在页面对datagrid的数据直接进行修改,然后提交到数据库,但是要求在提交前获取datagrid的所有行的数据.API提供了getData方法,但是怎么用了,没说. 最后这样写才搞定 var a ...

  3. 【C++基础】 各种“虚”总结(ing...)

    虚基类,虚函数,虚析构函数,纯虚函数,虚函数表(待补充) 一.虚基类——在继承方式(public / private)之前加 virtual class B1: virtual public B0{} ...

  4. HDU4612+Tarjan缩点+BFS求树的直径

    tarjan+缩点+树的直径题意:给出n个点和m条边的图,存在重边,问加一条边以后,剩下的桥的数量最少为多少.先tarjan缩点,再在这棵树上求直径.加的边即是连接这条直径的两端. /* tarjan ...

  5. linux grep和正则表达式

    虽然正则表达式经常都在用,但是很少能够静下心来仔细的总结一下.最近看了一个台湾人的网站叫做鸟哥Linux私房菜,关于正则表达式的描述挺详细的.在此,我进行一下总结,如果想仔细的学习正则表达式,请访问鸟 ...

  6. 李洪强漫谈iOS开发[C语言-011] - C语言标示符

    /** *    标示符 2016年 7月 14日 01 低级语言和高级语言的最大不同: 低级语言用的是机器指令 高级语言就是写一些人可以看得懂的代码-汇编语言 标示符 就是名字 命名规则: 1) 只 ...

  7. TCP长连接与短连接的区别

    http://www.cnblogs.com/liuyong/archive/2011/07/01/2095487.html 1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,se ...

  8. Spring RestTemplate介绍

    http://www.cnblogs.com/rollenholt/p/3894117.html RestTemplate 这篇文章打算介绍一下Spring的RestTemplate.我这边以前设计到 ...

  9. php cloure闭包

    Closures 它可以让您创建in-line 函数.许多语言已经开始有此功能了,也许您在不知道的情况下也使用过它. 例如: <?php $myFunction = function() { e ...

  10. latex 写作

    一.下载:http://www.ctex.org/CTeXDownload 二.bst文件的作用 在tex文件调用bib时,如 \bibliographystyle{Science} \bibliog ...