Checkbox-group和Checkbox

Checkbox-group是由一组单选或者多选Checkbox组件组成,效果如下图所示。

Checkbox-group - 图1

引入组件

在 page.json 中引入组件

  1. {
  2. "usingComponents": {
  3. "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
  4. "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
  5. "mp-cells": "weui-miniprogram/cells/cells"
  6. }
  7. }

示例代码

  1. <!--WXML示例代码-->
  2. <mp-cells title="单选列表项">
  3. <mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
  4. <mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
  5. </mp-checkbox-group>
  6. </mp-cells>
  7. <mp-cells title="复选列表项">
  8. <mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
  9. <mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
  10. </mp-checkbox-group>
  11. </mp-cells>
  1. // page.js示例代码
  2. Page({
  3. data: {
  4. radioItems: [
  5. {name: 'cell standard', value: '0', checked: true},
  6. {name: 'cell standard', value: '1'}
  7. ],
  8. checkboxItems: [
  9. {name: 'standard is dealt for u.', value: '0', checked: true},
  10. {name: 'standard is dealicient for u.', value: '1'}
  11. ],
  12. },
  13. radioChange: function (e) {
  14. console.log('radio发生change事件,携带value值为:', e.detail.value);
  15. var radioItems = this.data.radioItems;
  16. for (var i = 0, len = radioItems.length; i < len; ++i) {
  17. radioItems[i].checked = radioItems[i].value == e.detail.value;
  18. }
  19. this.setData({
  20. radioItems: radioItems,
  21. [`formData.radio`]: e.detail.value
  22. });
  23. },
  24. checkboxChange: function (e) {
  25. console.log('checkbox发生change事件,携带value值为:', e.detail.value);
  26. var checkboxItems = this.data.checkboxItems, values = e.detail.value;
  27. for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
  28. checkboxItems[i].checked = false;
  29. for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
  30. if(checkboxItems[i].value == values[j]){
  31. checkboxItems[i].checked = true;
  32. break;
  33. }
  34. }
  35. }
  36. this.setData({
  37. checkboxItems: checkboxItems,
  38. [`formData.checkbox`]: e.detail.value
  39. });
  40. },
  41. });

checkbox-group组件属性列表

属性类型默认值必填说明
ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
multibooleantrue单选还是多选
propstringForm表单组件校验的字段名
bindchangeeventhandlerCheckbox-group发生改变时候触发的事件,detail为{value},单选的value为checkbox的值,多选的value为选中的checkbox的值组成的数组

checkbox-group的Slot

名称描述
默认内容slot

checkbox组件属性列表

属性类型默认值必填说明
ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
multibooleantrue单选还是多选
checkedboolean是否选中
valuestringcheckbox的值
bindchangeeventhandlerCheckbox发生改变时候触发的事件,detail为{value},value为checkbox的值