首页>>表单>>jquery 全选插件(2014-06-30)

jquery 全选插件

jquery 全选插件
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form>  
  2. <input id="demo" type="checkbox"> Check All  
  3. <input type="checkbox" value="1"> option 1  
  4. <input type="checkbox" value="2"> option 2  
  5. <input type="checkbox" value="3"> option 3  
  6. </form>  

 

JavaScript Code
  1. ;(function ($, window, document) {  
  2.   var pluginName = 'checkAll';  
  3.   
  4.   var defaults = {  
  5.     container: document,  
  6.     childCheckboxes: 'input[type=checkbox]',  
  7.     showIndeterminate: false  
  8.   };  
  9.   
  10.   function checkAll(element, options) {  
  11.     this.$el = $(element);  
  12.     this.options = $.extend({}, defaults, options) ;  
  13.     this.init();  
  14.   }  
  15.   
  16.   checkAll.prototype.init = function() {  
  17.     this._checkChildren();  
  18.   
  19.     var plugin = this;  
  20.   
  21.     this.$el.on('change', function(e) {  
  22.       var $children = $(plugin.options.childCheckboxes, plugin.options.container).not(plugin.$el);  
  23.       $children.prop('checked', $(this).prop('checked'));  
  24.     });  
  25.   
  26.     $(this.options.container).on('change', plugin.options.childCheckboxes, function(e) {  
  27.       plugin._checkChildren();  
  28.     });  
  29.   };  
  30.   
  31.   // prevent multiple instantiations  
  32.   $.fn[pluginName] = function (options) {  
  33.     return this.each(function() {  
  34.       if (!$.data(this, 'plugin_' + pluginName)) {  
  35.         $.data(this, 'plugin_' + pluginName,  
  36.           new checkAll(this, options));  
  37.       }  
  38.     });  
  39.   }  
  40.   
  41.   checkAll.prototype._checkChildren = function() {  
  42.     var totalCount = $(this.options.childCheckboxes, this.options.container).not(this.$el).length;  
  43.     var checkedCount = $(this.options.childCheckboxes,this.options.container)  
  44.       .filter(':checked').not(this.$el).length;  
  45.   
  46.     var indeterminate = this.options.showIndeterminate &&  
  47.       checkedCount > 0 && checkedCount < totalCount;  
  48.   
  49.     this.$el.prop('indeterminate', indeterminate);  
  50.     this.$el.prop('checked', checkedCount === totalCount);  
  51.   }  
  52. })(jQuery, window, document);  

 


原文地址:http://www.freejs.net/article_biaodan_358.html