Represents the checkbox.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
value | string | - | No | Component value. Checking it triggers the change event of checkbox-group and passes value of checkbox. |
disabled | boolean | false | No | Disabled or not. |
checked | boolean | false | No | Whether the component is selected. You can set the checkbox to be selected by default. |
color | string | #0A59F7 | No | Color of the checkbox, which follows the CSS color value syntax. |
HXML file:
<view class="page-body">
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" has:for="{{items}}">
<checkbox
value="{{item.name}}"
checked="{{item.checked}}"
disabled="{{item.disabled}}" />
{{item.value}}
</label>
</checkbox-group>
</view> JS file:
Page({
data: {
items: [
{ name: "angular", value: "AngularJS" },
{ name: "react", value: "React" },
{ name: "vue", value: "Vue.js", checked: true },
{ name: "node", value: "nodejs" },
{ name: "element", value: "element-ui", disabled: true },
],
},
checkboxChange: function (e) {
console.log("A change event occurs in the checkbox. Carried value: ", e.detail.value);
},
});