043 ∞ 表单组件：checkbox

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了button，本次来学习checkbox。

checkbox，多选框，属性：

属性名	类型	默认值	说明
value	String		<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

checkbox-group，多项选择器，内部由多个checkbox组成，属性：

属性名	类型	默认值	说明
bindchange	EventHandle		<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

index.wxml：

1. 
   
2. <checkbox-group bindchange="checkboxChange">
   
3.   <label class="checkbox" wx:for="{{items}}">
   
4.     <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
   
5.   </label>
   
6. </checkbox-group>

复制代码

index.js：

1. Page({
   
2.   data: {
   
3.     items: [
   
4.       { name: 'USA', value: '美国' },
   
5.       { name: 'CHN', value: '中国', checked: 'true' },
   
6.       { name: 'BRA', value: '巴西' },
   
7.       { name: 'JPN', value: '日本' },
   
8.       { name: 'ENG', value: '英国' },
   
9.       { name: 'TUR', value: '法国' },
   
10.     ]
    
11.   },
    
12.   checkboxChange: function (e) {
    
13.     console.log('checkbox发生change事件，携带value值为：', e.detail.value)
    
14.   }
    
15. })

复制代码

控制台依次输出：

---

课后作业


1、补充代码：

1. <？ bindchange="checkboxChange">
   
2.     <？ value="{{item.name}}" checked="true"/>FishC
   
3. </checkbox-group>

复制代码

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图