夏日博客

A-A+

jQuery使用prop设置checkbox全选、反选例子

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

对于checkbox的全选与反选我相信各位朋友都有用过了，在此我们介绍使用prop来进行操作了，具体的操作如下。

大家都知道 jQuery 可通过 attr 方法来设置 dom 属性，自然的也就想到用 $(dom).attr('checked', 'checked'); 这种方法来选择 checkbox 了，但是最近在项目中使用 checkbox 全选、反选的时候，却出现了问题：
在使用 attr 方法设置选择后，点击第一次可以设置反选，第二次却不行了。

  1. $(function(){  
  2.     var checkbox = $("input[type='checkbox']");  
  3.     //全选  
  4.     $('#select-all').click(function(){  
  5.         checkbox.attr('checked', true);  
  6.     });  
  7.     //反选  
  8.     $('#select-reverse').click(function(){  
  9.         checkbox.each(function(i, dom){  
  10.             if ( $(dom).attr('checked') ) {  
  11.                 $(dom).removeAttr('checked');  
  12.             } else {  
  13.                 $(dom).attr('checked', 'checked');  
  14.             }  
  15.         });  
  16.     });  
  17. });  

在查阅了一些资料后，才发现：对于jQuery 1.6.0+ 的版本，要使用prop方法来设置。

  1. $(function(){  
  2.     var checkbox = $("input[type='checkbox']");  
  3.     //全选  
  4.     $('#select-all').click(function(){  
  5.         checkbox.prop("checked", true);  
  6.     });  
  7.     //反选  
  8.     $('#select-reverse').click(function(){  
  9.         checkbox.prop("checked", function(index, attr){  
  10.             return !attr;  
  11.         });  
  12.     });  
  13. });  
标签：

给我留言