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

checkbox复选项组件说明：

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

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

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

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

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

 

下面是WXML代码：

[JavaScript]  纯文本查看 复制代码

?

1 2 3 4 5 6 7 8

<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代码：

[JavaScript]  纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14

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代码：

 

[CSS]  纯文本查看 复制代码

?

1 2 3 4

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

 

checkbox复选项的主要属性：

 

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

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637446.html