微信小程序之单选框

微信小程序中的单选框（Radio）是一个常用的输入组件，用于在多个选项中进行选择。常见的应用场景有性别选择、选项过滤、问卷调查等。本文将介绍小程序中单选框的特点和作用及相应示例。

一、单选框的特点和作用

特点：

1. 单一选择：用户只能选择一个选项，适合于互斥项的选择。

2. 分组显示：单选框通常是一个选项组的形式，多个单选框的组合，一般会有相同的 name 属性，以便在选择时实现互斥效果。

3. 简洁明了：界面简洁，有助于用户快速阅读和做出选择。

4. 嵌套性：可以将单选框嵌套在表单、卡片等容器中，适应不同的 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.js
Page({
  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)
  },
});

本文主要论述了单选框的特点和作用，并用了难度不同的两个示例讲述了单选框的具体使用方法。