欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-01-25 16:36浏览: 来源:网络 作者:tianshu

组件说明:

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


组件用法:

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

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





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。