微信小程式checkbox元件詳解實例程式碼

這篇文章主要介紹了微信小程式 checkbox元件詳解及簡單實例的相關資料,需要的朋友可以參考下

實現效果圖：

checkbox-group

多選項目群組，內部由多個checkbox組成。

checkbox-group內只能包含checkbox

##預設值說明bindchangeEventHandle 在checkbox-group中選取項目發生變更是觸發change事件，detail = {value:[選取的checkbox的value的陣列]}

#屬性名稱	#類型

#checkbox

多選項目。

屬性名稱#類型預設值value#disabledchecked

		##說明
String		checkbox標識，選取時觸發checkbox-group的change事件，並攜帶checkbox的value
Boolean	false	是否停用
#Boolean	false	目前是否選中，可用來設定預設選取

#範例：

<checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for-items="{{items}}">
 <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>

Page({
 data: {
 items: [
 {name: 'USA', value: '美国'},
 {name: 'CHN', value: '中国', checked: 'true'},
 {name: 'BRA', value: '巴西'},
 {name: 'JPN', value: '日本'},
 {name: 'ENG', value: '英国'},
 {name: 'TUR', value: '法国'},
 ]
 },
 checkboxChange: function(e) {
 console.log('checkbox发生change事件，携带value值为：', e.detail.value)
 }
})

感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！

以上是微信小程式checkbox元件詳解實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！