Uniapp 单选 / 多选怎么实现

原创于 2025-09-07 10:45:00 发布 · 397 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

在Uniapp中实现单选和多选功能，主要使用<radio-group>和<checkbox-group>组件。以下是具体实现方法和数据绑定示例：

一、单选实现 (radio-group)

核心步骤：

使用<radio-group>包裹多个<radio>
通过@change事件获取选中值
使用value绑定选项值

<template>
  <view>
    <radio-group @change="handleRadioChange">
      <label v-for="item in radioList" :key="item.value">
        <radio :value="item.value" :checked="item.checked" /> 
        {{ item.label }}
      </label>
    </radio-group>
    <view>当前选中: {{ radioValue }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radioValue: '', // 存储选中值
      radioList: [
        { label: '选项A', value: 'A', checked: false },
        { label: '选项B', value: 'B', checked: false },
        { label: '选项C', value: 'C', checked: false }
      ]
    }
  },
  methods: {
    handleRadioChange(e) {
      this.radioValue = e.detail.value;
      // 更新选中状态
      this.radioList.forEach(item => {
        item.checked = item.value === e.detail.value;
      });
    }
  }
}
</script>

二、多选实现 (checkbox-group)

核心步骤：

使用<checkbox-group>包裹多个<checkbox>
通过@change事件获取选中数组
使用value绑定选项值

<template>
  <view>
    <checkbox-group @change="handleCheckboxChange">
      <label v-for="item in checkboxList" :key="item.value">
        <checkbox :value="item.value" :checked="item.checked" /> 
        {{ item.label }}
      </label>
    </checkbox-group>
    <view>当前选中: {{ checkboxValues.join(', ') }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checkboxValues: [], // 存储选中值数组
      checkboxList: [
        { label: '苹果', value: 'apple', checked: false },
        { label: '香蕉', value: 'banana', checked: false },
        { label: '橙子', value: 'orange', checked: false }
      ]
    }
  },
  methods: {
    handleCheckboxChange(e) {
      this.checkboxValues = e.detail.value;
      // 更新选中状态
      this.checkboxList.forEach(item => {
        item.checked = e.detail.value.includes(item.value);
      });
    }
  }
}
</script>

三、关键要点说明

数据绑定：
- 单选：绑定单个值 radioValue
- 多选：绑定值数组 checkboxValues
状态同步：
- 在@change事件中更新数据源中的checked状态
- 使用v-for动态渲染选项列表

样式优化建议：

/* 添加间距 */
label {
  display: block;
  margin: 10px 0;
}
/* 自定义选中样式 */
radio, checkbox {
  transform: scale(0.8);
  margin-right: 5px;
}

注意事项：
- H5端需添加<label>标签确保点击文字可触发选择
- 小程序端需设置<radio>和<checkbox>的color属性自定义颜色
- 动态修改选中状态时，直接修改数据源而非操作DOM

实际开发中，建议将选项数据存储在Vuex中实现跨组件状态管理，对于复杂表单可使用uni-forms组件进行集成验证。