checkbox就是所謂的多選框，在使用時需要配合checkbox-group，于此同時radio，單選按鈕孤荣，與之配合是radio-group甸陌，現就針對這兩個組件進行屬性的介紹：
checkbox
value：
<checkbox>標識，選中時觸發(fā)<checkbox-group>的 change 事件盐股，并攜帶<checkbox>的 valuedisabled ：是否禁用
checked ：當前是否選中钱豁，可用來設置默認選中
color ：checkbox的顏色，同css的color
radio
value：
<radio>標識疯汁。當該<radio>選中時牲尺，<radio-group>的 change 事件會攜帶<radio>的valuechecked：當前是否選中
disabled：是否禁用
color：radio的顏色，同css的color
列舉完屬性幌蚊，就擼一把代碼：
wxml:
<view class='container'>
<text class='title'>radio</text>
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}" /> {{item.value}}
</label>
</radio-group>
<text class='title'>checkbox</text>
<checkbox-group bindchange="checkboxChange" class="radio-group">
<label wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}" /> {{item.value}}
</label>
</checkbox-group>
<view class='show_radio_content'>
<text>當前選擇地區(qū)：{{radio_check_content}}</text>
</view>
</view>
js:
//index.js
Page({
data: {
items: [
{ name: 'USA', value: '美國' },
{ name: 'CHN', value: '中國', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國' },
{ name: 'TUR', value: '法國' },
],
radio_check_content:"CHN"
},
radioChange(e){
this.setData({
radio_check_content:e.detail.value
})
},
checkboxChange(e){
this.setData({
radio_check_content: e.detail.value
})
}
})
wxss:
/**index.wxss**/
.radio-group{
display: flex;
flex-direction: column;
width: 95%;
}
.show_radio_content{
padding: 10rpx;
width: 95%;
}
.title{
padding: 10rpx;
color: red;
}
代碼擼完谤碳，真是一下效果，沒當選擇溢豆，都會展示選擇后的效果：
10-1.png
10-2.png
