checkbox

多选项目。

效果展示

示例代码

WXML

<view class="page">
<view class="page__hd">
<text class="page__title">checkbox</text>
<text class="page__desc">多选框</text>
</view>
<view>value</view>
<view>这里是已选项:{{res}}</view>

<view class="page__bd">
<view class="section section_gap">
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
</view>
</view>
<view>disabled&color</view>
<checkbox value="test1" checked="false" color="#000000" disabled="true" />
<checkbox value="test2" checked="false" color="#0000ff" disabled="false" />
<checkbox value="test2" checked="false" color="#0000ff" disabled="{{false}}" />
<checkbox value="test3" checked="true" color="#ff0000" />
<checkbox value="test3" checked="true" color="#ff0" />

</view>

JS

Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'FRA', value: '法国'},
],
res: 'res'
},
checkboxChange: function(e) {
this.setData({
res: e.detail.value
})
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
}
})

WXSS

.checkbox{
display: block;
margin-bottom: 10px;
}

API

属性 类型 默认值 必填 说明
value string checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value
disabled boolean false 是否禁用
checked boolean false 当前是否选中,可用来设置默认选中
color string #09BB07 checkbox的颜色,同css的color

多平台支持

属性 平台支持
value 支付宝
disabled 支付宝
checked 支付宝
color 支付宝