📜  单选按钮组获取值 javascript (1)

📅  最后修改于: 2023-12-03 15:22:49.672000             🧑  作者: Mango

单选按钮组获取值 JavaScript

单选按钮组由多个单选按钮组成,用户只能选择其中的一个选项。在JavaScript中,我们可以通过获取所选单选按钮的value属性来获取它的值。

下面是一个单选按钮组的HTML代码示例:

<div>
  <input type="radio" id="option1" name="option" value="option1">
  <label for="option1">Option 1</label>
</div>

<div>
  <input type="radio" id="option2" name="option" value="option2">
  <label for="option2">Option 2</label>
</div>

<div>
  <input type="radio" id="option3" name="option" value="option3">
  <label for="option3">Option 3</label>
</div>

这个单选按钮组包含了三个单选按钮,分别有不同的id、name和value属性。其中name属性相同,表示它们是同一组的单选按钮。

我们可以使用JavaScript来获取被选中的单选按钮的值。下面是一段示例代码:

const options = document.getElementsByName('option');

let selectedOption;

for (let i = 0; i < options.length; i++) {
  if (options[i].checked) {
    selectedOption = options[i].value;
    break;
  }
}

console.log(selectedOption);

这段代码会获取所有name属性为'option'的单选按钮,然后遍历这些单选按钮,找到被选中的那个。一旦找到被选中的单选按钮,它的value属性就会被赋值给selectedOption变量。最后,我们可以使用console.log()方法将选项的值打印到控制台中。

以上就是单选按钮组获取值的简单介绍,希望对您有所帮助!