---

1、原生实现

1.1、html部分

暂时为null，后续会补充。

---

1.2、JavaScript部分

暂时为null，后续会补充。

---

1.3、css部分

暂时为null，后续会补充。

---

1.4、效果图

null

---

2、uniApp实现

2.1、html部分

<template><view><view><checkbox-group @change="checkboxChange"><view class="check_number_box"><view class="check_number_item" v-for="(item, i) in checkNumberData" :key="i"><view><!-- toString() 的作用是把数字转为字符串，否则报错 --><checkbox :value="item.toString()" /></view><text>{{ item }}</text></view></view></checkbox-group></view></view>
</template>

---

2.2、JavaScript部分

export default {data() {return {checkNumberData: 12}},methods: {checkboxChange(event) {// 得到的选中值console.log(event.detail.value);// ["5", "7", "10", "12"]}}
}

---

2.3、css部分

* {margin: 0;padding: 0;
}.check_number_box {box-sizing: border-box;padding: 10rpx 50rpx;display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 10rpx 10rpx;
}.check_number_item {display: flex;justify-content: flex-start;align-items: center;
}.check_number_item>text {margin-left: 6rpx;
}

---

2.4、效果图