checkbox
多选项目。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| value | String | 否 | checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value | ||
| disabled | Boolean | false | 否 | 是否禁用 | |
| checked | Boolean | false | 否 | 当前是否选中，可用来设置默认选中 | |
| color | Color | #00cac4 | 否 | checkbox的颜色，同css的color |
checkbox-group
多项选择器，内部由多个 checkbox 组成。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| bindchange | EventHandle | 否 | checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]} |
示例代码：
<!--pages/component/pages/checkbox/checkbox.mcml-->
<view class="container">
<view class="statement">多选按钮。</view>
<view class="cssname">checked</view>
<view>
<checkbox checked="true">选项一</checkbox>
<checkbox>选项二</checkbox>
</view>
<view class="cssname">disabled</view>
<view>
<checkbox disabled="true" checked="true">选项一</checkbox>
<checkbox disabled="true">选项二</checkbox>
</view>
<view class="cssname">color</view>
<view>
<checkbox checked="true" color="red">红色</checkbox>
<checkbox checked="{{test}}" color="blue">蓝色</checkbox>
<checkbox checked="{{test}}" color="blue">蓝色</checkbox>
</view>
<view class="cssname">checkbox-group：内部由多个checkbox组成</view>
<view>
<checkbox-group bindchange="bindchange">
<checkbox color="red" value="red" checked="{{checkRed}}">红色</checkbox>
<checkbox color="yellow" disabled="{{!redChecked}}" value="yellow">黄色</checkbox>
<checkbox color="blue" checked="true" value="blue">蓝色</checkbox>
<checkbox color="green" value="green">绿色</checkbox>
</checkbox-group>
</view>
<button bindtap="redcheckTap">选中红色</button>
<view class="cssname">bindchange：checkbox-group事件, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{detail}}</text>
</view>
// pages/component/pages/checkbox/checkbox.js
Page({
/**
* 页面的初始数据
*/
data: {
detail:'',
redChecked: false
},
bindchange: function(e){
this.setData({
detail: JSON.stringify(e, null, 2),
redChecked : e.detail.value.indexOf('red') >= 0
})
},
redcheckTap: function(){
this.setData({
checkRed: true
})
}
})