Vue 批量获取 input中radio的值

假设我们有这样一个表单：

<div id="app">
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <button @click="getSelectedGender">Get Selected Gender</button>
</div>

我们可以使用 `v-model` 指令和 `data` 属性来绑定选中的值：

<div id="app">
  <input type="radio" name="gender" value="male" v-model="selectedGender">
  <input type="radio" name="gender" value="female" v-model="selectedGender">
  <button @click="getSelectedGender">Get Selected Gender</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      selectedGender: ''
    },
    methods: {
      getSelectedGender() {
        console.log(this.selectedGender);
      }
    }
  });
</script>

如果我们想要批量获取多个 radio 的值，可以使用 `document.querySelectorAll` 方法获取所有的 radio 元素，然后遍历它们，检查哪些被选中：

<div id="app">
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <button @click="getSelectedGender">Get Selected Gender</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      getSelectedGender() {
        const radios = document.querySelectorAll('input[name="gender"]');
        const selectedRadios = [];

        radios.forEach(radio => {
          if (radio.checked) {
            selectedRadios.push(radio.value);
          }
        });

        console.log(selectedRadios);
      }
    }
  });
</script>