1. 基本用法：
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="option1">选项1</checkbox>
<checkbox value="option2">选项2</checkbox>
</checkbox-group>
Page({
onCheckboxChange: function (event) {
console.log('Checkbox values:', event.detail.value);
}
})
2. 设置默认选中值：
通过 checked 属性可以设置默认选中的值。
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="option1" checked>选项1</checkbox>
<checkbox value="option2">选项2</checkbox>
</checkbox-group>
3. 数据绑定：
checkbox 组件通过数据绑定实现动态渲染和获取选中值。
<checkbox-group bindchange="onCheckboxChange" value="{{selectedValues}}">
<checkbox value="option1">选项1</checkbox>
<checkbox value="option2">选项2</checkbox>
</checkbox-group>
Page({
data: {
selectedValues: ['option1']
},
onCheckboxChange: function (event) {
console.log('Checkbox values:', event.detail.value);
this.setData({
selectedValues: event.detail.value
});
}
})
4. 多列显示：
通过设置 column 属性可以实现多列显示。
<checkbox-group bindchange="onCheckboxChange" column="{{3}}">
<checkbox value="option1">选项1</checkbox>
<checkbox value="option2">选项2</checkbox>
<checkbox value="option3">选项3</checkbox>
<!-- 更多选项 -->
</checkbox-group>
5. 自定义样式：
可以通过设置 style 属性自定义样式。
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="option1" style="color: red;">选项1</checkbox>
<checkbox value="option2" style="color: blue;">选项2</checkbox>
</checkbox-group>
6. 事件绑定：
checkbox-group 支持 bindchange 事件，用于在选项变化时触发相应的事件处理函数。
<checkbox-group bindchange="onCheckboxChange">
<checkbox value="option1">选项1</checkbox>
<checkbox value="option2">选项2</checkbox>
</checkbox-group>
Page({
onCheckboxChange: function (event) {
console.log('Checkbox values:', event.detail.value);
}
})
以上是关于微信小程序 checkbox 组件的一些基本用法和属性。checkbox 主要用于让用户选择一个或多个选项，适用于多选的场景。
转载请注明出处：http://www.zyzy.cn/article/detail/802/微信小程序