代码Github地址
一. 属性说明
| 属性名 |
类型 |
默认值 |
说明 |
| bindchange |
EventHandle |
|
<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]} |
| 属性名 |
类型 |
默认值 |
说明 |
| value |
String |
|
<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value |
| disabled |
Boolean |
false |
是否禁用 |
| checked |
Boolean |
false |
当前是否选中，可用来设置默认选中 |
| color |
Color |
|
checkbox的颜色，同css的color |
二. 代码
<checkbox-group class="group" bindchange="checkboxChange">
<block wx:for="{{items}}" wx:item="item">
<view class="item">
<checkbox value="{{item.name}}" checked="{{item.checked}}" color="{{item.color}}" disabled="{{item.disabled}}" />{{item.value}}
</view>
</block>
</checkbox-group>
<text class="selected">{{seletedStr}}</text>
.group {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
margin-top: 20px;
display: flex;
flex-direction: row;
}
.selected {
margin-top: 50rpx;
font-size: 30rpx;
}
Page({
data: {
items: [
{ name: 'USA', value: '美国', color: 'red', disabled:true},
{ name: 'CHN', value: '中国', checked: 'true', color: 'green' },
{ name: 'BRA', value: '巴西', color: 'purple' },
{ name: 'JPN', value: '日本', color: 'orange' },
{ name: 'ENG', value: '英国', color: 'black' },
{ name: 'TUR', value: '法国', color: 'gray' },
],
seletedStr : ""
},
checkboxChange : function (event) {
console.log('checkbox发生change事件，携带value值为：', event.detail.value)
this.setData({
seletedStr: "选中的values值：" + event.detail.value
});
}
})
