微信小程序_(表單組件)checkbox與label

 

 

　　微信小程序組件checkbox官方文檔　　傳送門

　　微信小程序組件label官方文檔　　傳送門

 

 

　　Learn

　　　　1、checkbox組件

　　　　2、label組件與checkbox組件共用

 

 

1、checkbox組件

　　須要有一個checkbox-group多項選擇器去進行組合，內部有多個checkbox組成

　　disabled：是否禁用【默認值爲false】

　　checked：當前是否選中，可用來設置默認選中【默認值爲false】

　　color：checkbox的顏色，同css的color

　　當checked爲單標籤時，點擊文字，checkbox組件的checked無相應，當checked爲雙標籤時，點擊文字，checkbox組件的checked反向取反

 

<!--index.wxml-->
<checkbox-group>
  <checkbox value='v中國'/> 中國 
  <checkbox value='v中國' disabled='{{true}}'/> 美國
  <checkbox value='v俄國' checked='{{true}}' color='red'>俄國</checkbox> 
</checkbox-group>

<!-- 經過wx:for循環展現 -->
<checkbox-group>
  <view wx:for="{{array}}" wx:key="">
  <checkbox value='{{item.name}}' checked='{{item.checkbox}}' color='{{item.color}}' disabled='{{item.disabled}}'>{{item.value}}</checkbox> 
  </view>
</checkbox-group>

index.wxml

 

 

2、label組件與checkbox組件共用

　　用來改進表單組件的可用性，使用for屬性找到對應的id，或者將控件放在該標籤下，當點擊時，就會觸發對應的控件

　　for優先級高於內部控件，內部有多個控件的時候默認觸發第一個控件

　　目前能夠綁定的控件有：<button>, <checkbox>, <radio>, <switch>

 

<!--index.wxml-->
<checkbox-group>
  <checkbox value='v中國'/> 中國 
  <checkbox value='v中國' disabled='{{true}}'/> 美國
  <checkbox value='v俄國' checked='{{true}}' color='red'>俄國</checkbox> 
</checkbox-group>

<!-- 經過wx:for循環 -->
<checkbox-group>
  <label wx:for="{{array}}" wx:key="">
  <checkbox id="{{item.id}}" value='{{item.name}}' checked='{{item.checkbox}}' color='{{item.color}}' disabled='{{item.disabled}}'/>{{item.value}}
  </label>
</checkbox-group>

<label for='1001'>測試點擊 中國checkbox</label>

index.wxml

 

Page({
  data:{   
    array:[
      {id:"1001",name:"v中國",value:" 中國 ",checked:true,color:"red",disabled:false},
      {id:"1002",name:"v美國",value:" 美國 ",checked:false,color:"blue",disabled:false},
      {id:"1003",name:"v俄國",value:" 俄國 ",checked:false,color:"pink",disabled: false},
    ]  
  }
})

index.js