HTML | DOM Input Radio 选中属性

HTML的Radio类型的input元素允许用户从多个选项中选择一个选项。当我们需要在多个选项中选择一个时使用input type="radio"。

通过JS可以访问并控制这些Radio元素，其中包括一个名为checked的属性，用来标识选中的状态。

HTML中使用checked属性

我们可以通过设置Radio元素的checked属性来将其选中，代码如下：

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

在上面的代码片段中，我们已将性别设为“男性”，因此选中了第一个Radio。

JS中使用checked属性

通过JS我们也可以访问和修改Radio元素的checked属性。例如，我们可以将名为“gender”的Radio中选中value值为“female”的选项，代码如下：

document.querySelector('input[name="gender"][value="female"]').checked = true;

在上面的代码片段中，我们使用了querySelector方法选择了一个名为“gender”的Radio中value值为“female”的选项，并将其设为选中状态。

除此之外，我们还可以使用checked属性获取Radio元素的选中状态。如果选中了元素，则该属性的值为true，否则为false。例如，代码如下：

var radioMale = document.querySelector('input[name="gender"][value="male"]');
console.log(radioMale.checked); // true

var radioFemale = document.querySelector('input[name="gender"][value="female"]');
console.log(radioFemale.checked); // false

在上面的代码片段中，我们使用了querySelector方法选择了名为“gender”的Radio中value值分别为“male”和“female”的选项，并记录了它们的选中状态。

结语

通过HTML和JS，我们可以很方便地访问和控制Radio元素以及它们的选中状态。希望这篇文章对你有所帮助！