<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)

}
});

js复选框插件的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. js复选框全选反选

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

  3. Vue.js 复选框

    demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  4. JS复选框选中

    Web前端之复选框选中属性   熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...

  5. js复选框实现全选、全不选、反选

    复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...

  6. js复选框全选

    <input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'&g ...

  7. js复选框操作

    $(".checkall").click(function () {                if (this.checked) {                    $ ...

  8. js 复选框回显

    <div class="control-group"> <label class="control-label">客户状态:</l ...

  9. jenkins复选框插件Extended Choice Parameter plugin

    转载 https://www.cnblogs.com/zndxall/p/9512059.html https://www.cnblogs.com/jwentest/p/7113399.html

随机推荐

  1. 不会Python开发的运维终将被淘汰?

    Python语言是一种面向对象.直译式计算机程序设计语言,由Guido van Rossum于1989年底发明.Python语法简捷而清晰,具有丰富和强大的类库,具有可扩展性和可嵌入性,是现代比较流行 ...

  2. WPF DataGridTable

    由于项目要显示表头合并,而数据源列随时变更,又不想重复的画表格,就实现动态数据(dynamic)绑定和配置数据列模板的方式 编辑DataGridColumnHeader样式实现表头合并:效果如下 实现 ...

  3. OpenCL入门:(一:Intel核心显卡OpenCL环境搭建)

    组装的电脑没带独立显卡,用的是CPU自带的核显,型号是Intel HD Graphics 530,关于显卡是否可以使用OpenCL,可以下载GPU-Z软件查看. 本文在Windows 10 64位系统 ...

  4. Zigbee系列(end device)

    End device设备分为睡眠和非睡眠两种(RxOnWhenIdle标记不同). 入网时的association请求,会使用这个标记. 共同特性 子节点多次发送数据失败(无回应),发送孤点扫描(re ...

  5. Android手机测试-ddms&monitor-抓crash,log

    1.安装adb offline解决办法: 原因就是android 4.2以上的版本过高,sdk的adb驱动不匹配,需要升级.我原本的adb是1.0.29,升级为1.0.31,问题就解决了. 2.安装s ...

  6. 08-base镜像

    base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 所以,能称作 base 镜像的通常都是各种 Linux 发行版的 Docker 镜像,比如 Ub ...

  7. Linux 安装Redis<集群版>(使用Mac远程访问)

    阅读本文需要先阅读安装Redis<准备> 一 架构细节 所有的redis节点彼此互联(PING-PONG机制) 内部使用二进制协议优化传输速度和带宽 节点的fail是通过集群中超过半数的节 ...

  8. 使用calendar日历插件实现动态展示会议信息

    效果图如下,标红色为有会议安排,并跳转详细会议信息页面. html页面 <%@ page contentType="text/html;charset=UTF-8"%> ...

  9. 剑指 Offer——和为 S 的两个数字

    1. 题目 2. 解答 由于数组是已经排好序的,我们可以定义两个指针,第一个指针指向第一个元素,第二个指针指向最后一个元素,然后求出这两个元素的和,与目标和进行比较.若小于目标和,第一个指针向前移动: ...

  10. Pyhone学习之环境搭建

    一.python 环境搭建 本章节我们将向大家介绍如何在本地搭建Python开发环境.Python可应用于多平台包括 Linux 和 Mac OS X.你可以通过终端窗口输入 "python ...