代碼Github地址
一. 屬性說明
| 屬性名 |
類型 |
默認值 |
說明 |
| bindchange |
EventHandle |
|
<checkbox-group/>中選中項發(fā)生改變是觸發(fā) change 事件，detail = {value:[選中的checkbox的value的數(shù)組]} |
| 屬性名 |
類型 |
默認值 |
說明 |
| value |
String |
|
<checkbox/>標識停忿，選中時觸發(fā)<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發(fā)生change事件吮铭，攜帶value值為：', event.detail.value)
this.setData({
seletedStr: "選中的values值：" + event.detail.value
});
}
})
