//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()函数，以避免内存泄漏问题。
<script>
$(function () {

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

           //如果全选按钮被选中 则所有按钮军被选中   上面有prop用法 用prop()方法解决执行一次之后不能再全选问题

           $("#j_tb :checkbox").prop("checked", $(this).prop("checked"));

       });

       $("#j_tb :checkbox").click(function () {

            singleClick();

       });

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

          $("#j_tb :checkbox").each(function () {

              //反选

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

              singleClick();

          });

      });

       // 如果有一个子的checkbox没有选中，全选不选中 如果子的checkbox都选中了，全选选中

       function singleClick(){

           //如果子元素没有被选中 全选不选中

           if(!$("#j_tb :checkbox").checked){

               $("#j_cbAll").prop("checked",false);

           }

           //checkbox的个数

           var chsub = $("#j_tb :checkbox").length;

           //checkbox选中的个数

           var checkedsub = $("#j_tb :checkbox:checked").length;
　　　　　　//判断选择个数与所有个数是否相同

           if (checkedsub === chsub) {
　　　　　　　　　　//全选按钮被选中

               $("#j_cbAll").prop("checked", true);

           };

       }

   });
</script>
 




<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .wrap {

            width: 300px;

            margin: 100px auto 0;

        }

        table {

            border-collapse: collapse;

            border-spacing: 0;

            border: 1px solid #c0c0c0;

            width: 300px;

        }

        th,

        td {

            border: 1px solid #d0d0d0;

            color: #404060;

            padding: 10px;

        }

        th {

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

        }

        td {

            font: 14px "微软雅黑";

        }

        tbody tr {

            background-color: #f0f0f0;

        }

        tbody tr:hover {

            cursor: pointer;

            background-color: #fafafa;

        }

    </style>

    <script src="../js/jquery-1.12.4.js"></script>

</head>

<body>

<div class="wrap">

    <table>

        <thead>

        <tr>

            <th>

                <input type="checkbox" id="j_cbAll" />

            </th>

            <th>菜名</th>

            <th>饭店</th>

        </tr>

        </thead>

        <tbody id="j_tb">

        <tr>

            <td>

                <input type="checkbox" name="checkbox" />

            </td>

            <td>红烧肉</td>

            <td>田老师</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" name="checkbox" />

            </td>

            <td>西红柿鸡蛋</td>

            <td>田老师</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" name="checkbox" />

            </td>

            <td>红烧狮子头</td>

            <td>田老师</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" name="checkbox" />

            </td>

            <td>日式肥牛</td>

            <td>田老师</td>

        </tr>

        <tr>

            <td id="fanxuan">反选</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>


												


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

    
								
  1. jQuery prop方法替代attr方法
		
    jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法.
    
		
    2. 
						
  2. jquery全选 不全选
		
    <input type="checkbox" id="check">点击 <input type="checkbox" c ...
    
		
    3. 
						
  3. jQuery prop() 方法
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    4. 
						
  4. jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    5. 
						
  5. jquery中attr方法和prop方法的区别
		
    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...
    
		
    6. 
						
  6. jquery attr()和prop()方法的区别
		
    $('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...
    
		
    7. 
						
  7. JQuery常见方法
		
    <!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    8. 
						
  8. js prop方法
		
    添加和删除属性 $("button").click(function(){ var $x = $("div"); <!--添加属性--> $x.pr ...
    
		
    9. 
						
  9. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）
		
    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 取PE文件的引入表和导出表
			
    直接上代码(这里列出C++和Delphi的代码),Delphi代码中包含导入及导出文件和函数列表,PE结构可参阅资料,很多很详细,需要注意的是,本例中是映射到内存,不是通过PE装载器装入的,所以对于节 ...
    
			
    2. 
						
  2. elasticsearch 索引 类型 id
			
    zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat logstash_indexer01.conf  input {         redi ...
    
			
    3. 
						
  3. 如何在Root的手机上开启ViewServer，使得HierachyViewer能够连接
			
    前期准备: 关于什么是Hierarchy Viewer,请查看官方文档:http://developer.android.com/tools/debugging/debugging-ui.html.个 ...
    
			
    4. 
						
  4. RBF network
			
    1.radial basis function RBF表示某种距离,$\mu_m$为中心点,相当于将点$x$到中心点的某种距离作为特征转换 Output方法可以根据需求任意选取(比如使用SVM,log ...
    
			
    5. 
						
  5. 剑指Offer：面试题25
			
    题目描述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.九度OJ地址:http://ac.jobdu.c ...
    
			
    6. 
						
  6. javascript数组去重算法-----1
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    7. 
						
  7. 使用扩展名获取mimetype
			
    在Android中很多时候我们需要计算出文件的mimetype,而我们通常的思路就是通过扩展名来获取对应的mimetype,而如果自行处理,将维护一个比较大的映射表,而实际上大可不必,Android提 ...
    
			
    8. 
						
  8. JAVA布局管理器
			
    JAVA的界面布局原理:由于Java是跨平台语言,使用绝对坐标显然会导致问题,即在不同平台.不同分辨率下的显示效果不一样.Java 为了实现跨平台的特性并且获得动态的布局效果,Java将容器内的全部组 ...
    
			
    9. 
						
  9. 配置启动挂载：fstab文件具体解释
			
    fstab文件介绍 fstab文件包括了你的电脑上的存储设备及其文件系统的信息.它是决定一个硬盘(分区)被如何使用或者说整合到整个系统中的文件. 详细来说:用fstab能够自己主动挂载各种文件系统格式 ...
    
			
    10. 
						
  10. PHP基础示例：商品信息管理系统v1.1
			
    实现目标:使用php和mysql写一个商品信息管理系统,并带有购物车功能 一.创建数据库和表 1.创建数据库和表:demodb 2.创建表格:goods 字段:商品编号,商品名称,商品类型,商品图片, ...
    
			
    11.