如何设置HTML单选按钮默认选中项和获取选中值的方法实例教程

在HTML中，单选按钮是一种常用的表单元素，允许用户从一组选项中选择一个值。以下是设置HTML单选按钮默认选中项和获取选中值的详细方法及实例教程。

设置HTML单选按钮默认选中项

要设置单选按钮的默认选中项，只需在对应的 <input> 标签中添加 checked 属性。以下是一个简单的示例：

<form>
  <input type="radio" id="option1" name="options" value="option1" checked>
  <label for="option1">选项1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">选项2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">选项3</label>
</form>

在上述代码中，第一个单选按钮添加了 checked 属性，因此页面加载时它将默认被选中。需要注意的是，同一组单选按钮必须具有相同的 name 属性，这样用户才能从这组选项中选择一个值。

获取HTML单选按钮选中值

获取单选按钮选中值通常需要使用JavaScript。以下是几种不同的方法来实现这一功能。

使用 querySelector 方法

可以使用 querySelector 方法结合 :checked 伪类来获取选中的单选按钮，然后读取其 value 属性。示例代码如下：

<form id="myForm">
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">选项1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">选项2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">选项3</label><br>
  <button type="button" onclick="getValue()">获取选中值</button>
</form>
<script>
  function getValue() {
    var selectedOption = document.querySelector('input[name="options"]:checked');
    if (selectedOption) {
      alert('选中的值是: ' + selectedOption.value);
    } else {
      alert('没有选择任何选项');
    }
  }
</script>

在上述代码中，当用户点击“获取选中值”按钮时，会调用 getValue 函数。该函数使用 querySelector 方法查找选中的单选按钮，如果找到则弹出选中的值，否则提示用户没有选择任何选项。

遍历单选按钮组

另一种方法是遍历所有具有相同 name 属性的单选按钮，找到被选中的按钮并获取其值。示例代码如下：

<form id="myForm">
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">选项1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">选项2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">选项3</label><br>
  <button type="button" onclick="getValue2()">获取选中值</button>
</form>
<script>
  function getValue2() {
    var radios = document.getElementsByName('options');
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        alert('选中的值是: ' + radios[i].value);
        return;
      }
    }
    alert('没有选择任何选项');
  }
</script>

在这个例子中，getValue2 函数使用 getElementsByName 方法获取所有名为 options 的单选按钮，然后遍历这些按钮，找到被选中的按钮并弹出其值。如果没有找到选中的按钮，则提示用户没有选择任何选项。

通过以上方法，你可以轻松地设置HTML单选按钮的默认选中项并获取选中的值。