checkbox-group
checkbox-group
dùng để nhóm các checkbox lại với nhau, value củacheckbox-group
sẽ là một mảng chứa value của cáccheckbox
được chọn- Các thẻ
checkbox
bên trongcheckbox-group
cần được khai báo thuộc tínhvalue
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/checkbox/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/checkbox/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Mô tả |
---|---|---|
name | string | Khai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form |
onChange | function | Sự kiện được gọi khi giá trị của các checkbox bên trong bị thay đổi, event.detail = { value: value } , giá trị của value là một mảng các value của các checkbox được chọn |
Sample Code
index.txml
<view>
<block-header title="Usage" description="Checkboxes are used to let a user choose one or more options from a limited number of options." />
<view class="block-content">
<text class="title mb-8">Variants</text>
<text class="subtitle mb-8">State</text>
<text class="component-state">Default, Selected, Disable and Disable - Selected</text>
<checkbox-group onChange="onGroupChange">
<view class="component-item">
<checkbox value="check1" onChange="onChange" />
<text>Default</text>
</view>
<view class="component-item">
<checkbox value="check2" checked />
<text>Selected</text>
</view>
</checkbox-group>
</view>
</view>
index.js
Page({
onGroupChange(e) {
console.log('onGroupChange', e);
},
onChange(e) {
console.log('onChange', e);
}
});
index.tcss
.component-item {
flex-direction: row;
align-items: center;
}