Vue.js中如何获取所有单选按钮值并以name为键存储为JSON

嘿，我懂你现在的处境——单个单选按钮的值随手就能拿到，但要把所有单选组的结果按name作为键、value作为值整理成JSON格式，确实得绕个小弯。下面我给你几个实用的Vue风格解决方案，尽量贴合Vue的数据驱动理念，少碰DOM操作：

方法一：用响应式对象绑定所有单选组（最推荐） #

这是最符合Vue设计思想的方式，利用v-model把每个单选组和响应式对象的属性绑定，Vue会自动帮你维护选中状态，最后直接把对象转成JSON就行。

模板代码 #

<template>
  <div class="radio-container">
    <!-- 性别单选组 -->
    <label class="radio-label">
      <input type="radio" name="gender" value="male" v-model="radioResults.gender">
      男
    </label>
    <label class="radio-label">
      <input type="radio" name="gender" value="female" v-model="radioResults.gender">
      女
    </label>

    <!-- 偏好颜色单选组 -->
    <label class="radio-label">
      <input type="radio" name="favoriteColor" value="red" v-model="radioResults.favoriteColor">
      红色
    </label>
    <label class="radio-label">
      <input type="radio" name="favoriteColor" value="blue" v-model="radioResults.favoriteColor">
      蓝色
    </label>

    <button @click="exportToJson">导出为JSON</button>
  </div>
</template>

脚本代码 #

<script>
export default {
  data() {
    return {
      // 初始化对象，每个属性对应一个单选组的name
      radioResults: {
        gender: '',
        favoriteColor: ''
      }
    }
  },
  methods: {
    exportToJson() {
      // 直接将响应式对象转为JSON字符串
      const jsonData = JSON.stringify(this.radioResults)
      console.log('所有单选按钮值：', jsonData)
      // 这里可以做后续操作，比如提交到后端或者保存到本地
    }
  }
}
</script>

为什么推荐这个方法？
Vue的响应式系统会自动跟踪每个单选组的选中状态，只要用户切换选项，radioResults里对应的属性就会实时更新，完全不需要手动操作DOM，代码更易维护也更符合Vue的核心思想。

方法二：动态遍历DOM收集值（适合动态场景） #

如果你的单选组是动态生成的（比如从后端接口获取选项），或者不想提前定义所有name，可以通过遍历DOM来收集所有选中的单选按钮值。不过这种方法尽量少用，因为直接操作DOM会脱离Vue的响应式系统。

脚本代码 #

<script>
export default {
  methods: {
    getAllRadioValues() {
      const radioGroups = {}
      // 获取所有被选中的单选按钮
      const checkedRadios = document.querySelectorAll('input[type="radio"]:checked')

      checkedRadios.forEach(radio => {
        // 以name为键，value为值存入对象
        radioGroups[radio.name] = radio.value
      })

      const jsonData = JSON.stringify(radioGroups)
      console.log('所有单选按钮值：', jsonData)
    }
  }
}
</script>

注意事项：

• 如果有单选组没有被选中，对应的name不会出现在结果里；
• 如果单选组是通过Vue的v-for动态生成的，要确保DOM已经渲染完成再调用这个方法（比如放在this.$nextTick()里）。

额外小技巧：处理动态生成的单选组 #

如果你的单选组是动态加载的，可以提前初始化响应式对象，配合v-for动态绑定v-model：

<template>
  <div v-for="group in dynamicRadioGroups" :key="group.name">
    <h3>{{ group.label }}</h3>
    <label v-for="option in group.options" :key="option.value">
      <input type="radio" :name="group.name" :value="option.value" v-model="radioResults[group.name]">
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicRadioGroups: [
        {
          name: 'gender',
          label: '性别',
          options: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }]
        },
        {
          name: 'ageGroup',
          label: '年龄组',
          options: [{ label: '18-25', value: 'young' }, { label: '26-35', value: 'middle' }]
        }
      ],
      radioResults: {}
    }
  },
  created() {
    // 初始化响应式对象，给每个单选组设置默认值（可选）
    this.dynamicRadioGroups.forEach(group => {
      this.radioResults[group.name] = group.options[0].value
    })
  }
}
</script>

这样不管后续新增多少单选组，radioResults都会自动对应上，最后转成JSON也非常方便。

内容的提问来源于stack exchange，提问作者Kilu Vander