通过使用Label组件中for属性,指向checkbox的id,当点击label文字时,就会选中对应id的checkbox。
checkbox-group常用属性:
bindchange=“bindchange”:当点击或者取消了选中,都会触发该bindchange函数,
并且会将选中checkbox的value值传递,可在js中通过e.detail.value获取。
color=“red” :选中框内的对号为红色。
html代码:
<view>
<checkbox-group class="all" bindchange="bindchange">
<checkbox value="apple" checked>
<label for="apple">苹果</label>
</checkbox>
<checkbox value="pear">
<label for="pear">
梨子
</label>
</checkbox>
<checkbox value="banana" color="red">
<label for="banana">香蕉</label>
</checkbox>
</checkbox-group>
</view>
css代码:使用flex竖向布局,使checkbox竖着排列
.all{
display: flex;
flex-direction: column;
}
js代码:
Page({
bindchange(e){
console.log(e.detail.value);
}
})
结果:
控制台输出: