微信小程序_(表单组件)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>
index.wxml

 

 

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

 

posted @ 2019-03-30 22:12 Cynical丶Gary 阅读(...) 评论(...) 编辑 收藏