微信小程序（十五）checkbox組件詳細(xì)介紹

更新時間：2016年09月27日 14:24:22 作者：順子_RTFSC

這篇文章主要介紹了微信小程序checkbox組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下

不得不吐糟下checkbox默認(rèn)樣式真是有點(diǎn)略丑！??！checkbox組件為一個多選框被放到checkbox-group組中，并在checkbox-group（只能包含checkbox）中設(shè)置監(jiān)聽事件。

checkbox-group監(jiān)聽方法：

checkbox多選屬性：

wxml

<!--checkbox-group就是一個checkbox組 有個監(jiān)聽事件bindchange，監(jiān)聽數(shù)據(jù)選中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<!--這里用label顯示內(nèi)容，for循環(huán)寫法 wx:for-items 默認(rèn)item為每一項(xiàng)-->
 <label style="display: flex;" wx:for-items="{{items}}">
 <!--value值和默認(rèn)選中狀態(tài)都是通過數(shù)據(jù)綁定在js中的-->
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>

js

Page({
 /**
  * 初始化數(shù)據(jù)
  */
 data:{
 items: [
  {name: 'JAVA', value: 'Android', checked: 'true'},
  {name: 'Object-C', value: 'IOS'},
  {name: 'JSX', value: 'ReactNative'},
  {name: 'JS', value: 'wechat'},
  {name: 'Python', value: 'Web'}
 ]
 },

 /**
 * 監(jiān)聽checkbox事件
 */
 listenCheckboxChange:function(e) {
  console.log('當(dāng)checkbox-group中的checkbox選中或者取消是我被調(diào)用');
  //打印對象包含的詳細(xì)信息
  console.log(e);

 },

 onLoad:function(options){
 // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
 },
 onReady:function(){
 // 頁面渲染完成
 },
 onShow:function(){
 // 頁面顯示
 },
 onHide:function(){
 // 頁面隱藏
 },
 onUnload:function(){
 // 頁面關(guān)閉
 }
})

相關(guān)文章：

hello WeApp                     icon組件
Window                             text組件                                 switch組件
 tabBar底部導(dǎo)航               progress組件                         action-sheet
應(yīng)用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件