微信小程序单选按钮代码
时间: 2024-10-13 07:01:16 浏览: 37
微信小程序单选radio及多选checkbox按钮用法示例
在微信小程序中,创建单选按钮通常使用`checkbox`组件,它允许用户选择一项内容。下面是一个基础的单选按钮示例代码:
```html
<view class="item">
<label class="radio">
<input type="checkbox" wx:if="{{selectValue == 'option1'}}" checked bindchange="handleCheckboxChange" value="option1">
选项一
</label>
<!-- 其他选项... -->
</view>
```
在这个例子中:
- `wx:if="{{selectValue == 'option1'}}"`是条件渲染,当`selectValue`等于'option1'时,显示选中状态。
- `<input>`标签是单选按钮的基础元素,`bindchange`事件处理器`handleCheckboxChange`会在用户改变选择时触发。
- `value`属性用于设置单选按钮的值,比如用户选择了哪一项。
然后在对应的js文件中定义`handleCheckboxChange`函数来更新`selectValue`:
```javascript
Page({
data: {
selectValue: 'option1', // 默认选中项
},
handleCheckboxChange(e) {
this.setData({
selectValue: e.detail.value // 根据用户的选择更新选中项
});
}
})
```
阅读全文