JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div class="check-list">
		<hr>
		<div class="J_CheckListContainerBasic">
			<h4>基本使用</h4>

			<div class="check-all">
				<label>全选 <input type="checkbox" class="J_CheckAll"></label>
				<ul class="sub-checkbox">
					<li><label>选中 <input type="checkbox" class="J_CheckItem" value="1"></label></li>
					<li><label>选中 <input type="checkbox" class="J_CheckItem" value="2"></label></li>
					<li><label>选中 <input type="checkbox" class="J_CheckItem" value="3"></label></li>
				</ul>
			</div>
		</div>
	</div>

JavaScript

/**
 * JS全选
 * @class Checkall
 * @param {Object} cfg
 * @param {Element|selector} [cfg.container] 限定全选的容器
 * @param {selector} cfg.checkAll 全选框
 * @param {selector} cfg.checkItem 子选框
 */
 function CheckAll(cfg,callback) {
	var self = this;

	this.config = cfg;

	this.container = $(cfg.container) || document.body;

	// 全选自定义事件
	this.container.delegate(cfg.checkAll,'change',function(e){
		$(e.target).trigger('checkAllChange');
	});

	// 单选自定义事件
	this.container.delegate(cfg.checkItem,'change',function(e){
		$(e.target).trigger('checkItemChange');
	});

	// 全选操作
	this.container.delegate(cfg.checkAll,'checkAllChange',function(e){
	
		var checked = self.isItemChecked(e.target);

        self._checkAll(checked);

        // 选中所有子节点
        self._AllChildrenChecked(checked);

		callback && $.isFunction(callback) && callback(self);
	});

	// 单选操作
	this.container.delegate(cfg.checkItem,'checkItemChange',function(e){
		
		// 检查是否所有子节点都选中了
		if( self._isChildrenChecked()){
			self._checkAll(true);
		}
		else {
			self._checkAll(false);
		}
		callback && $.isFunction(callback) && callback(self);
	});
 };
 
 $.extend(CheckAll.prototype,{
	
	/*
	 * 选中单个checkbox
	 * @param item
	 * @param _isCheck
	 */
	_checkItem: function(item, _isCheck ){
		item = $(item);
		item.prop('checked', _isCheck);
	},
	/*
	 * 选中/反选所有的 全选按钮
	 * @method _checkAll {private}
	 * @param {Boolean} _isCheck
	 */
	_checkAll: function(_isCheck){
		var self = this;
		this.container.find(self.config.checkAll).each(function(index,item){
			var isAllChecked = self.isItemChecked(item);
			if(isAllChecked !== _isCheck) {
				 self._checkItem(item,_isCheck);
			}
		});
	},
	/*
	 * 选中/反选 所有的子节点
	 * @method _AllChildrenChecked {private}
	 */
	 _AllChildrenChecked: function(_isCheck){
		var self = this;
		this.container.find(this.config.checkItem).each(function(index,item){
			var itemChecked = self.isItemChecked(item);
			if( itemChecked !== _isCheck){
				self._checkItem(item, _isCheck);
			}
		});
	 },
	/*
	 *...