微信小程序中的单选框（Radio）是一个常用的输入组件，用于在多个选项中进行选择。常见的应用场景有性别选择、选项过滤、问卷调查等。本文将介绍小程序中单选框的特点和作用及相应示例。
一、单选框的特点和作用
特点：
-
单一选择：用户只能选择一个选项，适合于互斥项的选择。
-
分组显示：单选框通常是一个选项组的形式，多个单选框的组合，一般会有相同的
name属性，以便在选择时实现互斥效果。 -
简洁明了：界面简洁，有助于用户快速阅读和做出选择。
-
嵌套性：可以将单选框嵌套在表单、卡片等容器中，适应不同的 UI 设计。
作用：
-
收集用户选择：用于获取用户的偏好或选择，例如性别、支付方式等。
-
增强交互性：通过直观的选择方式，提高用户体验和交互性。
-
表单提交：与其他输入组件配合使用，完成表单数据的收集与提交。
二、简单示例
以下是一个简单的单选框示例，主要实现性别的选择。
1、界面设计
单选框选项组使用<radio-group></radio-group>标签，选项使用<radio></radio>标签，主要的属性为value，代表这个选项，另外还有checkded默认值为false是未选中状态，当值为true时是选中状态。
<view> <label>请选择您的性别：</label> <radio-group> <label class="radio-item"> <radio value="male" /> 男 </label> <label class="radio-item"> <radio value="female" /> 女 </label> <label class="radio-item"> <radio value="other" /> 其他 </label> </radio-group> </view> 2。处理逻辑
处理选择变化函数的主要功能是并通过e.detail.value值获取选中项的值，并使用setData()更新页面变量的值。
Page({ data: { selectedGender: '' }, // 处理选择变化 radioChange: function(e) { console.log('选中的性别为：', e.detail.value); this.setData({ selectedGender: e.detail.value }); } }); 三 高级示例
下面的示例是一个简单的测试项目中单选题的处理流程，主要功能是显示多道单选题，等待用户作答，提交后显示答题结果。其最终效果如下所示：
1、界面设计
最终界面刀上所示，详细代码如下：
xml文件主要是双重循环显示，外层循环是循环显示每道单选题，内层循环是在每道单选题内循环显示四个选项。最后在页面下方有一提交按钮，主要功能是提交用户的选择。
wxml 代码
<!--index.wxml--><navigation-bar title="单选框" back="{{false}}" color="black" background="#FFF"></navigation-bar><view class="container"> <block wx:for="{{questions}}" wx:key="id"> <text class="question">{{index+1}}、{{item.question}}</text> <radio-group class="options" data-question-id="{{item.id}}" bindchange="handleOptionChange"> <label class="option" wx:for="{{item.options}}" wx:key="index"> <radio value="{{index}}"/> {{item}} </label> </radio-group> </block> <button type= "primary" bindtap="submitAnswers">提交答案</button> <view wx:if="{{submitted}}"> <text>你提交的答案是：</text> <block wx:for="{{questions}}" wx:key="id"> <text>问题{{item.id}}：{{item.selected || '未选择'}}</text> </block> </view></view>wxss代码如下：
/**index.wxss**/.question { margin-right: 100px; margin-bottom: 20px; font-size: 16px; font-weight: bold;}.options { display: flex; flex-direction: column;}.option { margin-right:100px; margin-bottom: 10px;}button { margin-top: 20px; margin-bottom: 20px;}2、处理逻辑
其处理逻辑为三个部分，其一为预置的试题数组，包含id(试题编号 ),question(刘试题题题干),options(试题选项),selected(选中项的编号)、提交标识符等页面变量。其二为单选按钮组的选项变化函数，主要功能是选获取试题编号、选中项的编号等内容，并及时更新数据。其三是提交函数，主要功能为提交标识符赋值为true,并展开questions数组获取每道题的选中项赋值给answers并在控制台显示。
// index.jsPage({ data: { questions: [ { id: 0, question: "1 + 1 等于多少？", options: ["A. 1", "B. 2", "C. 3", "D. 4"], selected: "", // 初始时未选择答案 }, { id: 1, question: "2 * 2 等于多少？", options: ["A. 2", "B. 3", "C. 4", "D. 5"], selected: "", }, // 可以继续添加更多问题... ], submitted: false, // 标记是否已提交答案 }, handleOptionChange: function(e) { const {questionId}= e.currentTarget.dataset const optionId=e.detail.value this.data.questions[questionId].selected=optionId //更新已选中的项 this.setData({ questions: this.data.questions }); }, submitAnswers: function() { // 但为了简化，我们仅将submitted设置为true this.setData({ submitted: true, }); const answers=this.data.questions.map(q=>q.selected) console.log("您的答案是：",answers) },});本文主要论述了单选框的特点和作用，并用了难度不同的两个示例讲述了单选框的具体使用方法。
