checkbox多选项

本文编辑: Mirror Mirror浏览 5424 版权所有,严禁转载

组件说明:

  • checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择。
  • 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkbox-group标签。
  • checkbox-group标签的作用是可以为其中的checkbox标签绑定onchange事件,当用户做出选择的时候可以引导用户。
  • 单独的checkbox标签不会触发onchange事件,只有在checkbox-group上绑定才会触发。

组件用法:

wxml
<view>
    <checkbox-group class="checkbox-group" bindchange="changed">
        <label class="items" wx:for="{{item}}">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>
            {{item.name}}
        </label>
    </checkbox-group>
</view>
js
Page({
  data:{
    item: [
      {'name': '俄罗斯', 'value': 'RS', 'disabled': false},
      {'name': '美国', 'value': 'US', 'disabled': false},
      {'name': '中国', 'value': 'CN', 'disabled': false, 'checked': true},
      {'name': '英国', 'value': 'UK', 'disabled': false},
      {'name': '日本', 'value': 'JP', 'disabled': true}
    ]
  },
  changed: function(e) {
    console.info('你选择了' + e.detail.value);
  }
})
wxss
.items {
    display: block;
    margin: 30rpx;
}

主要属性:

checkbox-group

属性名称 数据类型 描述
bindchange EventHandle <checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

checkbox

属性名称 数据类型 描述 默认值
value String <checkbox/> 标识,选中时触发 <checkbox-group/> 的 change 事件,并携带 <checkbox/> 的value值
checked Boolean 是否使 <checkbox/> 默认被选中 false
disabled Boolean 是否使 <checkbox/> 被禁用 false
如有技术问题或对本文有反馈,请加入QQ群:
微信小程序实战5营: 微信小程序Club实战5营