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

 

 

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

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

 

 

　　Learn

　　　　一、checkbox組件

　　　　二、label組件與checkbox組件共用

 

 

一、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>

 

 

二、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>

 

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