小程序：checkbox

一. 属性说明

checkbox-group

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

checkbox

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

二. 代码

wxml

<checkbox-group class="group" bindchange="checkboxChange">  <block wx:for="{{items}}" wx:item="item">    <view class="item">      <checkbox value="{{item.name}}" checked="{{item.checked}}" color="{{item.color}}" disabled="{{item.disabled}}" />{{item.value}}    </view>  </block></checkbox-group><text class="selected">{{seletedStr}}</text>

wxss

.group {  display: flex;  flex-direction: column;  align-items: center;}.item {  margin-top: 20px;  display: flex;  flex-direction: row;}.selected {  margin-top: 50rpx;  font-size: 30rpx;}

Page({  data: {    items: [      { name: 'USA', value: '美国', color: 'red', disabled:true},      { name: 'CHN', value: '中国', checked: 'true', color: 'green' },      { name: 'BRA', value: '巴西', color: 'purple' },      { name: 'JPN', value: '日本', color: 'orange' },      { name: 'ENG', value: '英国', color: 'black' },      { name: 'TUR', value: '法国', color: 'gray' },    ],    seletedStr : ""  },  checkboxChange : function (event) {    console.log('checkbox发生change事件，携带value值为：', event.detail.value)    this.setData({      seletedStr: "选中的values值：" + event.detail.value    });  }})

文章转载于:https://www.jianshu.com/p/b61191618ace

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《小程序：checkbox》