js复选框插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/susuzhe123/article/details/79744045

<div class="selectList selectQgClass" id="selectQgClass">
										<div class="J_selAll selDataList" style="background: #e5e5e5;">
											<span class="J_check check" data-id="全部"></span>
											<span class="qgClassdatas">全部</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="全部"></span>
											<span class="qgClassdatas">初二物理精品班</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="青果一班"></span>
											<span class="qgClassdatas">青果一班</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="青果二班"></span>
											<span class="qgClassdatas">青果二班</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="期末满分班"></span>
											<span class="qgClassdatas">期末满分班</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="初一数学班"></span>
											<span class="qgClassdatas">初一数学班</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="青果三班"></span>
											<span class="qgClassdatas">青果三班</span>
										</div>
										<div class="selDataList">
											<span class="J_check check" data-id="青果精品班"></span>
											<span class="qgClassdatas">青果精品班</span>
										</div>
										<div class="bottomBtn">
											<p class="j_selCancel selbtn left">取消</p>
											<p class="j_selSure selbtn left">确定</p>
										</div>
									</div>

/**
	 * @Author   QG
	 * @DateTime 2018-03-29
	 * @desc     [青果班级选择]
	 * @version  [version]
	 * @param    [type]   ele [description]
	 * @return   [type]       [description]
	 */
	function selQgClass(f) {
		var o = {
			ele:'selectQgClass',
			child:'selDataList',
			cancle:function(){},
			sure:function(){}
		}
		this.f = $.extend(o, f);
		
		this.dom = document.getElementById(o.ele);
		this.single = document.getElementsByClassName(o.child);
		this.cancle = this.dom.getElementsByClassName('j_selCancel');
		this.sure = this.dom.getElementsByClassName('j_selSure');
		this.init();
	}

	selQgClass.prototype = {
		init:function() {
			this.handle();
		},
		chooseAll:function(flag) {
			if(flag){
				//全选
				$(this.dom).find('.check').addClass('checked');
			}else{
				//取消全选
				$(this.dom).find('.check').removeClass('checked');
			}	
		},
		total:function(flag) {
			//统计选中个数
			var len = this.single.length - 1;
			var checke = this.dom.getElementsByClassName('checked');	
			var checkLen = flag ? checke.length-1 : checke.length;
			if(checkLen < len){
				$(this.single[0]).find('.check').removeClass('checked');
			}else{
				$(this.single[0]).find('.check').addClass('checked');
			}
		},
		handle:function() {
			var _that = this;

			$(this.single).click(function(e){
				G.stopPropagation(e);
				var _this = $(this);
				var singleCheck = _this.find('.check');
				if(_this.hasClass('J_selAll')){
					//全选按钮
					_that.chooseAll(!singleCheck.hasClass('checked'));
				}else{
					//单选按钮
					if(singleCheck.hasClass('checked')){
						//取消选择
						singleCheck.removeClass('checked');
					}else{
						//选择
						singleCheck.addClass('checked');
					}
					_that.total($('.J_selAll').find('.check').hasClass('checked'))
				}
			})

			//取消
			$('.j_selCancel').click(function(){
				if (_that.f.cancle && $.isFunction(_that.f.cancle)) {
		            _that.f.cancle.call(_that)
		        }
		        _that.chooseAll(false);
			})
			//确认
			$('.j_selSure').click(function(){
		        if (_that.f.sure && $.isFunction(_that.f.sure)) {
		            _that.f.sure.call(_that)
		        }
			})
		}
	}

/**
			     * [sel description]
			     * @type 父元素selectQgClass  子元素selDataList
			     */
			    var sel = new selQgClass({
							ele:'selectQgClass',
							child:'selDataList',
							cancle:function(){
								
							},
							sure:function(){
								var arr = [];
								var checked = $(this.single);
								checked.each(function(){
									var checVal = $(this).find('.J_check');
							    	if(checVal.hasClass('checked')){
							    		arr.push(checVal.attr('data-id'))
							    	}
							    });
							    console.log(arr)
							  
							}
						});