小程式15-checkbox元件
阿新 • • 發佈:2020-07-13
checkbox是複選框元件;需要搭配checkbox-group使用
屬性 |
型別 |
預設值 |
必填 |
說明 |
value |
string |
否 |
checkbox標識,選中時觸發checkbox-group的 change 事件,並攜帶checkbox的 value |
|
disabled |
boolean |
false |
否 |
是否禁用 |
checked |
boolean |
false |
否 |
當前是否選中,可用來設定預設選中 |
color |
string |
#09BB07 |
否 |
checkbox的顏色,同css的color |
<checkbox-group bindchange="handleChange"> <checkbox wx:for="{{list}}" wx:key="cityNo" value="{{item.cityNo}}"> {{item.cityName}} </checkbox> </checkbox-group> <view> 選中的城市編號: <view>{{checkedList}}</view> </view>
Page({ /** * 頁面的初始資料*/ data: { list:[ {cityNo:110000,cityName:'北京'}, {cityNo:200000,cityName:'上海'}, {cityNo:510000,cityName:'廣州'}, ], checkedList:[] }, // 複選框的選中事件 handleChange(e){ // 獲取選中的複選框的值 const checkedList = e.detail.value this.setData({ checkedList }) }, })