微信小程序 制作一个单选按钮 /是否绝育 已绝育 未绝育/狂犬疫苗接种情况 已接种 未接种 /体内驱虫 未驱 每月一次 超过一个月未做 /体外驱虫 未驱 每月一次 超过一个月未做 /健康状况 良好 其他(请注明)代码
时间: 2023-09-11 13:07:53 浏览: 99
可以使用微信小程序的radio组件来实现单选按钮。以下是一个简单的示例代码:
```
<view class="radio-group">
<view class="radio-item">
<radio value="已绝育" checked="{{isSpayed}}" bindchange="onSpayedChange">是否绝育</radio>
</view>
<view class="radio-item">
<radio value="已接种" checked="{{isVaccinated}}" bindchange="onVaccinatedChange">狂犬疫苗接种情况</radio>
</view>
<view class="radio-item">
<radio value="未驱" checked="{{isInternalDewormed}}" bindchange="onInternalDewormedChange">体内驱虫</radio>
</view>
<view class="radio-item">
<radio value="未驱" checked="{{isExternalDewormed}}" bindchange="onExternalDewormedChange">体外驱虫</radio>
</view>
<view class="radio-item">
<radio value="良好" checked="{{isHealthy}}" bindchange="onHealthyChange">健康状况</radio>
</view>
<view class="radio-item">
<radio value="其他" checked="{{isOther}}" bindchange="onOtherChange">其他(请注明)</radio>
</view>
</view>
```
在js文件中需要定义对应的变量和事件处理函数:
```
Page({
data: {
isSpayed: false,
isVaccinated: false,
isInternalDewormed: false,
isExternalDewormed: false,
isHealthy: false,
isOther: false,
otherText: ''
},
onSpayedChange: function(event) {
this.setData({
isSpayed: event.detail.value === '已绝育'
})
},
onVaccinatedChange: function(event) {
this.setData({
isVaccinated: event.detail.value === '已接种'
})
},
onInternalDewormedChange: function(event) {
this.setData({
isInternalDewormed: event.detail.value === '未驱'
})
},
onExternalDewormedChange: function(event) {
this.setData({
isExternalDewormed: event.detail.value === '未驱'
})
},
onHealthyChange: function(event) {
this.setData({
isHealthy: event.detail.value === '良好'
})
},
onOtherChange: function(event) {
this.setData({
isOther: event.detail.value === '其他'
})
},
onOtherInput: function(event) {
this.setData({
otherText: event.detail.value
})
}
})
```
注意,如果选中了“其他”,还需要添加一个文本框来输入其他信息。可以使用input组件:
```
<view wx:if="{{isOther}}">
<input placeholder="请输入其他信息" bindinput="onOtherInput" />
</view>
```
阅读全文