微信小程序组件解读和分析：checkbox复选项介绍-小程序开发-PHP中文网

微信小程序组件解读和分析：checkbox复选项介绍

高洛峰

发布： 2017-03-19 17:32:04

原创

2265 人浏览过

checkbox复选项组件说明：

checkbox是小程序表单组件中的一个组件，作用是在表单中引导用户做出选择。

要使用checkbox组件，还需要在同组中所有的checkbox标签外使用checkbox-group标签。

checkbox-group标签的作用是可以为其中的checkbox标签绑定onchange事件，当用户做出选择的时候可以引导用户。

单独的checkbox标签不会触发onchange事件，只有在checkbox-group上绑定才会触发。

checkbox复选项组件示例代码运行效果如下：

下面是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: [
      {&#39;name&#39;: &#39;俄罗斯&#39;, &#39;value&#39;: &#39;RS&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;美国&#39;, &#39;value&#39;: &#39;US&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;中国&#39;, &#39;value&#39;: &#39;CN&#39;, &#39;disabled&#39;: false, &#39;checked&#39;: true},
      {&#39;name&#39;: &#39;英国&#39;, &#39;value&#39;: &#39;UK&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;日本&#39;, &#39;value&#39;: &#39;JP&#39;, &#39;disabled&#39;: true}
    ]
  },
  changed: function(e) {
    console.info(&#39;你选择了&#39; + e.detail.value);
  }
})

登录后复制

下面是WXSS代码：

.items {
    display: block;
    margin: 30rpx;
}

登录后复制

checkbox复选项的主要属性：

checkbox-group

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

checkbox

属性名称	数据类型	描述	默认值
value	String	标识，选中时触发的 change 事件，并携带的value值
checked	Boolean	是否使默认被选中	false
disabled	Boolean	是否使被禁用	false

以上是微信小程序组件解读和分析：checkbox复选项介绍的详细内容。更多信息请关注PHP中文网其他相关文章！