input type="radio" value绑定对象

input 标签的 value 属性指定了该选项的值，而 name 属性指定了它所属的表单元素的名称。如果多个单选按钮具有相同的名称，但不同的值，那么它们将被视为同一组单选按钮。这意味着用户只能选择其中的一个选项。在表单提交时，只有被选中的单选按钮的值将被提交。因此，可以使用 JavaScript 来获取选择的单选按钮的值。例如：

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

<script>
  const gender = document.querySelector('input[name="gender"]:checked').value;
  console.log(gender); // 输出选中的单选按钮的值
</script>

在这个示例中，用户只能选择三个单选按钮之一。当用户提交表单时，被选中的单选按钮的值将作为表单数据的一部分被发送到服务器。在 JavaScript 中，我们使用 `document.querySelector('input[name="gender"]:checked')` 来获取被选中的单选按钮，然后使用 `.value` 属性来获取它的值。

相关问题

vue input type=radio 选中事件

在 Vue 中，你可以使用 `v-model` 指令来双向绑定 `input` 元素的值，并且可以使用 `@change` 事件监听 `input` 元素值的变化。对于 `type="radio"` 的输入框，你可以借助 `v-model` 绑定选中的值，然后在 `@change` 事件中触发相应的方法来处理选中事件。

例如，假设你有一个包含两个 `radio` 按钮的组件，代码如下：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" @change="handleOptionChange">
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption" @change="handleOptionChange">
    <label for="option2">Option 2</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1'
    }
  },
  methods: {
    handleOptionChange() {
      console.log(`Selected option is ${this.selectedOption}`)
      // 这里可以处理选中事件
    }
  }
}
</script>

在上面的代码中，我们使用 `v-model` 指令将 `selectedOption` 双向绑定到两个 `radio` 按钮的值上，然后在 `@change` 事件中触发 `handleOptionChange` 方法来处理选中事件。当一个 `radio` 按钮被选中时，`selectedOption` 的值会被更新，然后 `handleOptionChange` 方法会被调用，并且可以在方法中处理选中事件。

优化 这段代码 <form> <p>请选择您喜欢的颜色：</p> <input type="radio" name="color" value="red"> 红色<br> <input type="radio" name="color" value="green"> 绿色<br> <input type="radio" name="color" value="blue"> 蓝色<br> <br> <p>请选择您喜欢的水果：</p> <input type="radio" name="fruit" value="apple"> 苹果<br> <input type="radio" name="fruit" value="banana"> 香蕉<br> <input type="radio" name="fruit" value="orange"> 橙子<br> <br> <input type="submit" value="提交"> </form> <script> function onHHH(e) { console.log(e); } </script>

这段代码可以进行以下优化：

1. 使用 label 标签来关联选项和文本，提高可访问性。
2. 将 input 标签的 type 属性设置为 button，避免表单默认提交行为。
3. 使用事件委托，将事件处理程序绑定到父元素上，减少事件处理程序的数量。

优化后的代码如下：

<form>
<p>请选择您喜欢的颜色：</p>
<label><input type="radio" name="color" value="red"> 红色</label><br>
<label><input type="radio" name="color" value="green"> 绿色</label><br>
<label><input type="radio" name="color" value="blue"> 蓝色</label><br><br>
<p>请选择您喜欢的水果：</p>
<label><input type="radio" name="fruit" value="apple"> 苹果</label><br>
<label><input type="radio" name="fruit" value="banana"> 香蕉</label><br>
<label><input type="radio" name="fruit" value="orange"> 橙子</label><br><br>
<input type="button" value="提交">
</form>

<script>
document.querySelector('form').addEventListener('click', function(e) {
if (e.target.tagName === 'INPUT' && e.target.type === 'button') {
console.log(e);
}
});
</script>