This topic describes the multi-choice selector, that is, checkbox.
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 | - |
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. |
Illustration
Sample code
// acss
.checkbox {
display: block;
margin-bottom: 20rpx;
}
.checkbox-text {
font-size:34rpx;
line-height: 1.2;
}
<checkbox-group onChange="onChange">
<label class="checkbox" a:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
<text class="checkbox-text">{{item.value}}</text>
</label>
</checkbox-group>
Page({
data: {
items: [
{name: 'angular', value: 'AngularJS'},
{name: 'react', value: 'React', checked: true},
{name: 'polymer', value: 'Polymer'},
{name: 'vue', value: 'Vue.js'},
{name: 'ember', value: 'Ember.js'},
{name: 'backbone', value: 'Backbone.js', disabled: true},
],
},
onChange(e) {
my.alert({
title: `You have selected the ${e.detail.value} framework`,
});
},
});