HTML DOM Input Radio 对象-猿码集

HTML DOM Input Radio 对象

HTML DOM Input Radio 对象代表一个单选按钮元素。单选按钮是一组用户可以从中选择一个选项的选项按钮。单选按钮可以是单独使用的或者与其他单选按钮结合使用，以创建多选项选择列表。

创建单选按钮

要在 HTML 文档中创建单选按钮，可以使用 <input> 元素，并将 type 属性设置为“radio”。为了使一组单选按钮一起工作，每个单选按钮都应该有相同的 name 属性值。在下面的代码中，我们创建了一个包含两个单选按钮的单选按钮组：


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

请注意，我们使用 label 标签来将单选按钮与标签文本一起使用。这样可以使单选按钮更容易被选择。

访问单选按钮

可以使用 JavaScript 来访问单选按钮。使用 document.getElementsByName() 方法可以获得具有指定 name 属性值的所有单选按钮。在下面的代码中，我们获取 name 为“gender”的所有单选按钮：


<form>
  <label>
    <input type="radio" name="gender" value="male">
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label>
</form>
<script>
var radios = document.getElementsByName("gender");
</script>

上面代码中，radios 变量包含所有 name 属性值为“gender”的单选按钮。

选择单选按钮

可以使用 JavaScript 来选择单选按钮。可以将单选按钮的 checked 属性设置为 true 或 false。在下面的代码中，我们选择第一个单选按钮：


<form>
  <label>
    <input type="radio" name="gender" value="male">
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label>
</form>
<script>
var radios = document.getElementsByName("gender");
radios[0].checked = true;
</script>

上面代码中，我们使用第一个单选按钮并将其 checked 属性设置为 true。这将使该单选按钮被选中。

检查单选按钮是否被选中

可以使用 checked 属性来检查单选按钮是否被选中。checked 属性返回 true 或 false。在下面的代码中，我们检查第一个单选按钮是否被选中：


<form>
  <label>
    <input type="radio" name="gender" value="male">
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label>
</form>
<script>
var radios = document.getElementsByName("gender");
var isMaleChecked = radios[0].checked;
</script>

上面代码中，isMaleChecked 变量包含第一个单选按钮是否被选中的布尔值。

总结

HTML DOM Input Radio 对象代表单选按钮元素。可以使用 JavaScript 来访问和更改单选按钮的属性，例如 checked 属性。单选按钮通常作为一组工作，因此每个单选按钮都应该具有相同的 name 属性值。

HTML DOM Input Radio 对象