js复选框插件

<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"huachengj1980.com>青果一班</span>
</div>
<div class="selDataList">
<span class="J_check check" data-id="青果二班"></span>
<span class="qgClassdatas">青果二班</span>
</div>
<div class="selDataList"dasheng178.com>
<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>

[javascript] view plain copy
/**
* @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(www.2636666.cn ){},
sure:function(www.mhylpt.com/){}
}
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(www.taohuayuan178.com/) {
this.handle(www.dashuju178.com );
},
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)
}
})
}
}

[javascript] view plain copy
/**
* [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)

}
});