## 复选框使用案例
本案例实现多选项时选择全部与取消选择功能
案例演示地址：http://resources.rubik-x.ucmed.cn/v1.3.0/docs/DefaultTheme/demo/demo2(checkbox list).html
html
~~~
<body>
<header class="rbk-titlebar"></header>
<div class="rbk-content">
<div class="rbk-checkbox" id="qx" v="0"><label>选中全部</label></div>
<div class="rbk-list rbk-removecolor">
<div class="rbk-listitem" tpl="tpl">
<div class="rbk-checkbox rbk-hasimg">
<img src="{img}">
<label>
<span>{text}</span>
<span class="docdep-icon">{de}</span>
</label>
</div>
</div>
</div>
<div class="rbk-list rbk-removecolor">
<div class="rbk-checkbox rbk-right">
<label>
<span>111</span>
</label>
</div>
</div>
<button id="yqbtn" class="rbk-btn">邀请</button>
</div>
</body>
~~~
css
~~~
.rbk-input-row.rbk-checkbox.rbk-left label>span{
width: 50%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.rbk-input-row.rbk-checkbox.rbk-left label>span:nth-child(2){
font-size: 14px;
color: #8a8a8a;
padding-left: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
.rbk-input-row.rbk-checkbox.rbk-left label>span:nth-child(2):before{
font-family: 'rbkmark';
content: '\e91d';
position: absolute;
left: 0;
color: #ccc;
font-size: 16px;
}
~~~
js
~~~
var g = [{
text:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d1',
de:'主任医师'
},{
text:'zzzzz',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d2',
de:'主任医师'
},{
text:'xxxxx',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d3',
de:'主任医师'
},{
text:'zzzzz',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d4',
de:'主任医师'
},{
text:'xxxxx',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d5',
de:'主任医师'
},{
text:'zzzzz',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d6',
de:'主任医师'
},{
text:'xxxxx',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d7',
de:'主任医师'
},{
text:'zzzzz',
img:'http://resources.rubik-x.ucmed.cn/v1.3.0/images/example/head01.png',
id:'d8',
de:'主任医师'
}]
rbk.ready(function(opt) {
var titlebar = rbk.getCmp('titlebar');
titlebar.title('邀请医生');
var list = rbk.getCmp('list');
list.doLayout(g);
var qx = rbk.getCmp('#qx');
qx.bindChange(function(me){
if($(me.dom).attr('v')==0){
$('.rbk-list .rbk-checkbox').each(function(i,e){
$(e).find('input[type=checkbox]').prop('checked','true')
})
$(me.dom).attr('v','1');
}else{
$('.rbk-list .rbk-checkbox').each(function(i,e){
$(e).find('input[type=checkbox]').prop("checked", function(index, attr){
return !attr;
});
})
$(me.dom).attr('v','0');
}
})
$('.rbk-list .rbk-checkbox input[type=checkbox]').on('click',function(){
if($(qx.dom).attr('v')==1){
$(qx.dom).attr('v','0');
qx.checked(false);
}
var checkall = 0;
$('.rbk-list .rbk-checkbox input[type=checkbox]').each(function(i,e){
if(!e.checked&&i!=0){
checkall = 1;
}
})
if(checkall == 0){
qx.checked(true);
$(qx.dom).attr('v','1');
}
})
var btn = rbk.getCmp('#yqbtn');
btn.bindClick(function(){
var objArray = new Array;
$('.rbk-list input[type=checkbox]').each(function(i,e){
if(e.checked&&i!=0){
objArray.push(g[i-1].id)
}
})
alert(objArray)
})
});
~~~
- 发布aar到maven仓库
- svn或gitlab代码上传规范
- maven仓库管理
- 自动构建
- Android自动构建
- Android-jenkins发布
- 规范
- Android
- Android组件模块文档
- 基础业务模块
- 智能导诊
- 科室医生
- 医院导航
- 健康资讯
- 健康百科
- 个人中心
- 外链模块
- 微信资讯
- 动态首页
- 互联网医院
- 外链模块基础版本
- 底层功能模块
- UI样式
- Http请求
- 动态功能
- 版本更新
- 支付（微信、支付宝）
- 二维码扫描
- 安全键盘
- 开发工具类模块
- icepick
- dart
- butterknife
- superRecycler
- jsonBuilder
- android-state
- iOS文档
- iOS组件模块文档
- iOS底层功能模块
- iOS弹出窗
- iOS加载框
- iOS-标准样式库
- iOS网络请求
- iOS二维码扫描
- iOS功能模块组件
- iOS健康资讯
- iOS健康百科
- iOS智能导诊
- iOS科室医生
- iOS医院导航
- iOS外链
- iOS模板（健康资讯类）
- iOS其它
- Cocoapods安装
- iOS-Cocoapods相关
- iOS-创建私有Cocoapods仓库
- 平台相关文档
- 全栈中心概述
- WEEX跨平台解决方法
- 玩转开发者平台
- android打包指南
- iOS自动化打包指南
- rubik-u web组件文档
- 开始
- 全局方法
- 列表组件
- 标题组件
- 按钮组件
- 切换组件
- 下拉框组件
- 开关/单/复选组件
- 功能列表组件
- 评星组件
- 搜索组件
- 图片上传组件
- 表单
- 表单例一
- 表单例二
- 表单例三
- 聊天组件
- 滑动刷新组件
- View窗口操作
- 面板组件
- 简单面板组件
- 信息展示面板
- 提示文字
- 底部悬浮组件
- 长文字展示组件
- 隐藏/显示面板
- 客户端组件
- 判断客户端环境
- 登录
- 等待框
- 提示框
- 时间选择器
- 扫码组件
- 拍照组件
- 访问相册组件
- 用户信息获取组件
- 返回上一页
- 返回首页
- 关闭webview
- 获取客户端类型
- 支付
- rubik-u web模板文档
- 基础组件模板
- 复选框使用案例