微信小程序组件解读和分析：checkbox复选项介绍-Pembangunan program mini-php.cn

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

高洛峰

Lepaskan： 2017-03-19 17:32:04

asal

2270 orang telah melayarinya

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>

Salin selepas log masuk

下面是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);
  }
})

Salin selepas log masuk

下面是WXSS代码：

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

Salin selepas log masuk

checkbox复选项的主要属性：

checkbox-group

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

checkbox

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

Atas ialah kandungan terperinci 微信小程序组件解读和分析：checkbox复选项介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!