找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

小程序极速实战开发《八》checkbox多选项

作者:模板之家 2018-1-25 16:35 10055人关注

组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择。 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkbox-group标签。 checkbox-group标签的

组件说明:

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


组件用法:

 

wxml


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


js
    1. Page({
    2.   data:{
    3.     item: [
    4.       {'name': '俄罗斯', 'value': 'RS', 'disabled': false},
    5.       {'name': '美国', 'value': 'US', 'disabled': false},
    6.       {'name': '中国', 'value': 'CN', 'disabled': false, 'checked': true},
    7.       {'name': '英国', 'value': 'UK', 'disabled': false},
    8.       {'name': '日本', 'value': 'JP', 'disabled': true}
    9.     ]
    10.   },
    11.   changed: function(e) {
    12.     console.info('你选择了' + e.detail.value);
    13.   }
    14. })
    15. wxss
    16. .items {
    17.     display: block;
    18.     margin: 30rpx;
    19. }
主要属性:

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/> 被禁用


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)