自定義樣式

默認的樣式如下：

<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