1. //1、如果通过prop()函数更改<input>和<button>元素的type属性，在多数浏览器上将会抛出一个错误，因为该属性一般不允许在后期更改。
    //如果使用prop()函数操作表单元素的checked、selected、disabled等属性，如果该元素被选中(或禁用)，则返回true，否则(意即HTML中没有该属性)返回false。
    //3、prop()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。
    //在IE9及更早版本中，如果使用prop()函数设置的属性值不是一个简单的原始值(String、Number、Boolean)，并且在对应的DOM元素被销毁之前，该属性没有被移除，则可能会导致内存泄漏问题。如果你只是为了存储数据，建议你使用data()函数，以避免内存泄漏问题。
  1. <script>
  1. $(function () {
  2.        $("#j_cbAll").click(function () {
  3.            //如果全选按钮被选中 则所有按钮军被选中   上面有prop用法 用prop()方法解决执行一次之后不能再全选问题
  4.            $("#j_tb :checkbox").prop("checked", $(this).prop("checked"));
  5.        });
  6.  
  7.        $("#j_tb :checkbox").click(function () {
  8.             singleClick();
  9.        });
  10.  
  11.       $("#fanxuan").click(function () {
  12.           $("#j_tb :checkbox").each(function () {
  13.               //反选
  14.               $(this).prop("checked", !$(this).prop("checked"));
  15.               singleClick();
  16.           });
  17.  
  18.       });
  19.        // 如果有一个子的checkbox没有选中，全选不选中 如果子的checkbox都选中了，全选选中
  20.        function singleClick(){
  21.            //如果子元素没有被选中 全选不选中
  22.            if(!$("#j_tb :checkbox").checked){
  23.                $("#j_cbAll").prop("checked",false);
  24.            }
  25.            //checkbox的个数
  26.            var chsub = $("#j_tb :checkbox").length;
  27.            //checkbox选中的个数
  28.            var checkedsub = $("#j_tb :checkbox:checked").length;
    　　　　　　//判断选择个数与所有个数是否相同
  29.            if (checkedsub === chsub) {
    　　　　　　　　　　//全选按钮被选中
  30.                $("#j_cbAll").prop("checked", true);
  31.            };
  32.        }
  33.  
  34.    });
  1. </script>
  1.  
  1.  
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.  
  12.         .wrap {
  13.             width: 300px;
  14.             margin: 100px auto 0;
  15.         }
  16.  
  17.         table {
  18.             border-collapse: collapse;
  19.             border-spacing: 0;
  20.             border: 1px solid #c0c0c0;
  21.             width: 300px;
  22.         }
  23.  
  24.         th,
  25.         td {
  26.             border: 1px solid #d0d0d0;
  27.             color: #404060;
  28.             padding: 10px;
  29.         }
  30.  
  31.         th {
  32.             background-color: #09c;
  33.             font: bold 16px "微软雅黑";
  34.             color: #fff;
  35.         }
  36.  
  37.         td {
  38.             font: 14px "微软雅黑";
  39.         }
  40.  
  41.         tbody tr {
  42.             background-color: #f0f0f0;
  43.         }
  44.  
  45.         tbody tr:hover {
  46.             cursor: pointer;
  47.             background-color: #fafafa;
  48.         }
  49.     </style>
  50.     <script src="../js/jquery-1.12.4.js"></script>
  51. </head>
  52. <body>
  53. <div class="wrap">
  54.     <table>
  55.         <thead>
  56.         <tr>
  57.             <th>
  58.                 <input type="checkbox" id="j_cbAll" />
  59.             </th>
  60.             <th>菜名</th>
  61.             <th>饭店</th>
  62.         </tr>
  63.         </thead>
  64.         <tbody id="j_tb">
  65.         <tr>
  66.             <td>
  67.                 <input type="checkbox" name="checkbox" />
  68.             </td>
  69.             <td>红烧肉</td>
  70.             <td>田老师</td>
  71.         </tr>
  72.         <tr>
  73.             <td>
  74.                 <input type="checkbox" name="checkbox" />
  75.             </td>
  76.             <td>西红柿鸡蛋</td>
  77.             <td>田老师</td>
  78.         </tr>
  79.         <tr>
  80.             <td>
  81.                 <input type="checkbox" name="checkbox" />
  82.             </td>
  83.             <td>红烧狮子头</td>
  84.             <td>田老师</td>
  85.         </tr>
  86.         <tr>
  87.             <td>
  88.                 <input type="checkbox" name="checkbox" />
  89.             </td>
  90.             <td>日式肥牛</td>
  91.             <td>田老师</td>
  92.         </tr>
  93.         <tr>
  94.             <td id="fanxuan">反选</td>
  95.         </tr>
  96.         </tbody>
  97.     </table>
  98. </div>
  99.  
  100. </body>
  101. </html>

jquery prop()方法 解决全选 不全选 反选 问题 解决执行一次不不能再执行问题的更多相关文章

  1. jQuery prop方法替代attr方法

    jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法.

  2. jquery全选 不全选

    <input type="checkbox" id="check">点击 <input type="checkbox" c ...

  3. jQuery prop() 方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery中attr方法和prop方法的区别

    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...

  6. jquery attr()和prop()方法的区别

    $('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...

  7. JQuery常见方法

    <!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js prop方法

    添加和删除属性 $("button").click(function(){ var $x = $("div"); <!--添加属性--> $x.pr ...

  9. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

随机推荐

  1. H面试程序（29）：求最大递增数

    要求:求最大递增数 如:1231123451 输出12345 #include<stdio.h> #include<assert.h> void find(char *s) { ...

  2. ajax跨域请求的方案

    $.get("@Hosts.Default.Www/api/XXXXX/Getxxx/"+@Model.UserId, function(data) { $("#tota ...

  3. chrome可以登陆账号的hosts文件

    原文地址: 百度 chrome吧 http://zhidao.baidu.com/question/1818688600091435508.html?qq-pf-to=pcqq.group http: ...

  4. 【Daily】 2014-4-23

    KEEP GOING Think more product when face difference Check value null when insert/remove/update/add ch ...

  5. oracle 物化视图导入导出报错

    1.exp导出报EXP-00008: 遇到 ORACLE 错误 1455,ORA-01455: 转换列溢出整数数据类型 2.imp导入报.注: 表包括 ROWID 列, 其值可能已废弃,不是警告也不是 ...

  6. kindeditor更改图片上传时网络图片的路径

    当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...

  7. mybatisnet轻量级ORM框架

    https://code.google.com/p/mybatisnet/source/checkout http://blog.csdn.net/arvinstudy/article/details ...

  8. uva 10051 Tower of Cubes(DAG最长路）

    题目连接:10051 - Tower of Cubes 题目大意:有n个正方体,从序号1~n, 对应的每个立方体的6个面分别有它的颜色(用数字给出),现在想要将立方体堆成塔,并且上面的立方体的序号要小 ...

  9. Nutch的发展历程

    Nutch的创始人是Doug Cutting,他同时也是Lucene.Hadoop和Avro开源项目的创始人 下面是Nutch的发展历程: 月由Doug Cutting发起,托管于Sourceforg ...

  10. Cannot create JDBC driver of class '' for connect URL 'jdbc:mysql://127.0.0.1:3306/test'

    原来的配置如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...