All Products
Search
Document Center

checkbox

Last Updated: Apr 19, 2021

This topic describes the multi-choice selector, that is, checkbox.

checkbox-group

The multi-selector group.

Attribute Type Default value Description Minimum version
name String - The component name, which is used to submit the form to obtain data. -
onChange EventHandle - Trigger when the selected item is modified, where detail = {value: The value of the selected checkbox item}. -

checkbox

The multi-choice item.

Attribute Type Default value Description Minimum version
value String - The component value, which is the value carried by the change event when the component is selected. -
checked Boolean false Whether the current item is selected. You can use this attribute to set the item as selected by default. -
disabled Boolean false Whether to disable the button. -
onChange EventHandle - Trigger when the component is modified, where detail = {value: Whether this checkbox is selected}. -
color Color - The checkbox color. 1.10.0

Illustration

Sample code

  1. // acss
  2. .checkbox {
  3. display: block;
  4. margin-bottom: 20rpx;
  5. }
  6. .checkbox-text {
  7. font-size:34rpx;
  8. line-height: 1.2;
  9. }
  1. <checkbox-group onChange="onChange">
  2. <label class="checkbox" a:for="{{items}}">
  3. <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
  4. <text class="checkbox-text">{{item.value}}</text>
  5. </label>
  6. </checkbox-group>
  1. Page({
  2. data: {
  3. items: [
  4. {name: 'angular', value: 'AngularJS'},
  5. {name: 'react', value: 'React', checked: true},
  6. {name: 'polymer', value: 'Polymer'},
  7. {name: 'vue', value: 'Vue.js'},
  8. {name: 'ember', value: 'Ember.js'},
  9. {name: 'backbone', value: 'Backbone.js', disabled: true},
  10. ],
  11. },
  12. onChange(e) {
  13. my.alert({
  14. title: `You have selected the ${e.detail.value} framework`,
  15. });
  16. },
  17. });