Javascript 如何选择单选按钮

在 Web 应用中，单选按钮被广泛使用，通过选择单选按钮，用户可以进行选择并提交表单数据。在本篇文章中，我们将介绍如何使用 Javascript 选择单选按钮。

1. 获取单选按钮

在 Javascript 中，通过获取单选按钮元素的值，我们可以确定用户选择的选项。使用 document.getElementsByName() 方法可以获取单选按钮元素的值，这个方法可以通过元素的 name 属性选择对应的单选按钮。

 const radioBtns = document.getElementsByName('fruit');

这个方法会返回一个 NodeList 对象，使用 forEach() 循环可以遍历单选按钮元素列表。

radioBtns.forEach(radioBtn => {
  // 这里放入对单选按钮的操作
});

2. 获取被选中的单选按钮

通过遍历单选按钮元素列表，我们可以判断哪个单选按钮被选中。在一个单选按钮被选中时，它的 checked 属性会变为 true。使用 if 语句可以判断哪个单选按钮被选中。

radioBtns.forEach(radioBtn => {
  if (radioBtn.checked) {
    console.log(`你选择了 ${radioBtn.value}`);
  }
});

3. 设置单选按钮的选中状态

我们也可以通过 Javascript 来设置单选按钮的选中状态。在遍历单选按钮元素列表时，我们可以使用 setAttribute() 方法将 checked 属性设为 true，从而设置单选按钮为选中状态。

radioBtns.forEach(radioBtn => {
  if (radioBtn.value === 'apple') {
    radioBtn.setAttribute('checked', true);
  }
});

总结

在本篇文章中，我们介绍了如何使用 Javascript 选择单选按钮。通过获取单选按钮元素的值，我们可以确定用户选择的选项。同时，我们还介绍了如何判断哪个单选按钮被选中以及如何设置单选按钮的选中状态。