微信小程式checkbox元件詳解實例程式碼-小程式開發-PHP中文網

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

高洛峰

發布： 2018-05-10 15:41:17

原創

2420 人瀏覽過

這篇文章主要介紹了微信小程式 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: &#39;USA&#39;, value: &#39;美国&#39;},
 {name: &#39;CHN&#39;, value: &#39;中国&#39;, checked: &#39;true&#39;},
 {name: &#39;BRA&#39;, value: &#39;巴西&#39;},
 {name: &#39;JPN&#39;, value: &#39;日本&#39;},
 {name: &#39;ENG&#39;, value: &#39;英国&#39;},
 {name: &#39;TUR&#39;, value: &#39;法国&#39;},
 ]
 },
 checkboxChange: function(e) {
 console.log(&#39;checkbox发生change事件，携带value值为：&#39;, e.detail.value)
 }
})

登入後複製

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

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