正文

掌握JavaScript：轻松获取单选框选定值的小技巧与实例

/0 浏览量
0407

在网页开发中，单选框是一个常用的表单控件，用于让用户从一组选项中选择一个。而获取用户选择的单选框值是进行后续处理的基础。JavaScript提供了多种方法来实现这一功能。下面，我将通过一个实例，教你如何轻松获取单选框选定值。

基础知识：单选框与JavaScript

首先，我们需要了解单选框的基本HTML结构：

<form>
  <input type="radio" id="option1" name="options" value="Option 1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="Option 2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="options" value="Option 3">
  <label for="option3">Option 3</label><br>
  <button type="button" onclick="showSelected()">Submit</button>
</form>
<p id="selectedValue"></p>

在这个例子中，我们有三个单选框，它们都属于同一组（name="options"），并且都有一个对应的标签（<label>）。

JavaScript方法：获取单选框选定值

获取单选框选定值的最常见方法是使用document.querySelector或者document.getElementById配合单选框的value属性。

方法一：使用document.querySelector

function showSelected() {
  var selectedValue = document.querySelector('input[name="options"]:checked').value;
  document.getElementById('selectedValue').textContent = 'Selected value: ' + selectedValue;
}

在这个函数中，我们首先获取所有名为options的单选框中选中的元素，然后通过其value属性获取选定值，最后将结果显示在页面上。

方法二：使用document.getElementById

function showSelected() {
  var options = document.getElementsByName('options');
  var selectedValue = '';
  for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
      selectedValue = options[i].value;
      break;
    }
  }
  document.getElementById('selectedValue').textContent = 'Selected value: ' + selectedValue;
}

在这个方法中，我们遍历所有名为options的单选框，检查它们的checked属性。一旦找到选中的单选框，我们获取其value属性并跳出循环。

实例分析

在上面的例子中，当用户点击“Submit”按钮时，showSelected函数会被调用。这个函数通过上述任一方法获取用户选择的单选框值，并将结果显示在页面的<p>元素中。

总结

通过这两个实例，我们可以看到获取单选框选定值是多么简单。在实际应用中，你可以根据具体需求选择合适的方法。记住，JavaScript的强大之处在于其灵活性和多样性，掌握这些小技巧将有助于你更高效地开发网页。

-- 展开阅读全文 --