【小程序实现单选多选功能】是小程序开发中常见的需求，尤其在构建用户交互界面时。小程序提供的原生`<radio>`（单选）和`<checkbox>`（多选）组件虽然能完成基本功能，但样式定制性相对较弱。本文将详细介绍如何自定义样式来实现更具个性化的单选和多选功能。
### 1. 模拟实现多选框
#### 1.1 结构与样式
在WXML文件中，我们创建一个`<view>`容器，包含一个`<checkbox-group>`和一系列的`<label>`。每个`<label>`代表一个选项，通过`wx:for`指令遍历数据数组，并且绑定`bindtap`事件来处理点击事件。`<checkbox>`组件设置为隐藏，仅用于传递值。CSS样式用于美化选项的显示效果，包括边框、圆角、颜色等。
```html
<!-- WXML -->
<view class='wrap'>
<view class='checkbox-con'>
<checkbox-group bindchange="checkboxChange">
<label class="{{item.checked?'checkbox checked':'checkbox'}}"
wx:for="{{checkboxArr}}"
bindtap='checkbox'
data-index="{{index}}"
wx:key="item.name">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>
{{item.name}}
</label>
</checkbox-group>
<button type='primary' bindtap='confirm'>提交</button>
</view>
</view>
```
```css
/* WXSS */
.wrap {
width: 550rpx;
margin: 50rpx auto;
}
.checkbox-con {
margin-top: 40rpx;
text-align: center;
}
.checkbox {
/* ... 省略具体样式 */
}
.checked {
/* ... 省略具体样式 */
}
.checkbox checkbox {
display: none;
}
.checked-img {
/* ... 省略具体样式 */
}
```
#### 1.2 JavaScript逻辑
在JS文件中，初始化数据数组`checkboxArr`，其中每个对象包含`name`和`checked`属性。`checkbox`方法处理单个选项的点击事件，通过`dataset`获取当前点击项的索引，并切换其`checked`值。`checkboxChange`处理整个`checkbox-group`的变化，获取所有选中的项的值。`confirm`方法在用户点击提交按钮时打印所有选中的项的`value`。
```javascript
// JS
Page({
data: {
checkboxArr: [
// ... 省略具体数据
],
},
checkbox: function(e) {
var index = e.currentTarget.dataset.index;
var checkboxArr = this.data.checkboxArr;
checkboxArr[index].checked = !checkboxArr[index].checked;
this.setData({
checkboxArr: checkboxArr,
});
},
checkboxChange: function(e) {
var checkValue = e.detail.value;
this.setData({
checkValue: checkValue,
});
},
confirm: function() {
console.log(this.data.checkValue);
},
});
```
### 2. 模拟实现单选框
实现单选框的思路与多选框类似，但需要在点击时清除其他选项的选中状态。在WXML中，将`<checkbox-group>`替换为`<radio-group>`，并相应调整JS逻辑。当点击某个选项时，遍历数据数组，将所有其他项的`checked`值设为`false`，然后将当前项设为`true`。
```html
<!-- WXML -->
<view class='wrap'>
<view class='radio-con'>
<radio-group bindchange="radioChange">
<!-- 同样使用label和data-index，但此处用radio代替checkbox -->
</radio-group>
<button type='primary' bindtap='confirm'>提交</button>
</view>
</view>
```
```javascript
// JS
Page({
data: {
radioArr: [
// ... 省略具体数据
],
},
radio: function(e) {
var index = e.currentTarget.dataset.index;
var radioArr = this.data.radioArr;
for (var i = 0; i < radioArr.length; i++) {
if (i === index) {
radioArr[i].checked = true;
} else {
radioArr[i].checked = false;
}
}
this.setData({
radioArr: radioArr,
});
},
radioChange: function(e) {
var radioValue = e.detail.value;
this.setData({
radioValue: radioValue,
});
},
confirm: function() {
console.log(this.data.radioValue);
},
});
```
总结来说，实现小程序中的自定义单选和多选功能，主要依赖于对数据数组的操作以及动态更新视图。需要注意的是，由于小程序不支持DOM操作，我们需要借助`setData`来同步数据模型和视图。通过这种方式，我们可以创建出符合项目需求的、样式丰富的单选和多选组件，提供更好的用户体验。
