1. 程式人生 > 實用技巧 >小程式15-checkbox元件

小程式15-checkbox元件

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 }) }, })