uniapp自定义checkbox样式以及checkbox的使用

自定义样式

默认的样式如下:

<checkbox-group @change="onChange">
 <label>
 <checkbox class="round" value="cb" :checked="isCheckbox" style="transform: scale(0.6)" />
 <text style="margin-left: -10rpx">这是一段测试文字</text>
 </label>
</checkbox-group>

加上这段样式代码即可

<style>
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
 border-radius: 100upx;
}
checkbox.round[checked] .wx-checkbox-input,
checkbox.round.checked .uni-checkbox-input {
 background-color: #de3533 !important;
 border-color: #de3533 !important;
 color: #ffffff !important;
}
</style>

checkbox-group的使用

<checkbox-group @change="onChange">
 <label>
 <checkbox class="round" value="cb" :checked="isCheckbox" style="transform: scale(0.6)" />
 <text style="margin-left: -10rpx">我已阅读并同意并阅读xxx协议</text>
 </label>
</checkbox-group>

<script setup>
const isCheckbox = ref(false);
 const onChange = (e) => {
 console.log('内容', e);
 // e.detail.value为勾选的值
 // 我们当前只用了一个checkbox,所以直接判断数组长度即可
 isCheckbox.value = e.detail.value.length ? true : false;
 console.log('赋值后', isCheckbox.value);
};
</script>

勾选

未勾选

参考文档:
uniapp:checkbox-group