javascript dom设置单选框的选项

DOM (Document Object Model) 是一种用于处理HTML和XML文档的 API (应用程序接口)，它提供了一种访问文档的方式，使得开发者可以通过 JavaScript 脚本改变页面的结构和内容。在 Web 开发中，DOM 是非常重要的，因此了解 DOM 中如何设置单选框的选项是非常有用的。

单选框是一种 HTML 表单元素，通常用于让用户从多个选项中选择一个。在 DOM 中，要设置单选框的选项，我们可以使用以下两种方法：

1. 使用 checked 属性

通过设置单选框的 checked 属性，我们可以选中单选框的某个选项。例如，我们可以创建一个单选框组并给其中一个设置 checked 属性来选中它：

<label>
  <input type="radio" name="fruit" value="apple" checked>
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="pear">
  Pear
</label>

登录后复制

在上面的例子中，我们给第一个单选框设置 checked 属性来选中它。请注意，这样会使第一个单选框默认选中，即使用户没有点击它。

要使用 JavaScript 访问和修改单选框的 checked 属性，我们可以使用以下代码：

// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');

// 检查单选框是否处于选中状态
console.log(appleRadio.checked); // true

// 设置单选框为选中状态
appleRadio.checked = true;

// 取消单选框的选中状态
appleRadio.checked = false;

登录后复制

在上面的代码中，我们首先获取了值为 "apple" 的单选框元素，然后访问了它的 checked 属性。我们还可以使用 checked 属性来设置单选框的选中状态，如将 true 赋值给它，就可以将单选框设置为选中状态；将 false 赋值给它，则可以取消单选框的选中状态。

1. 使用 setAttribute 方法

除了使用 checked 属性外，我们还可以使用 setAttribute 方法来设置单选框的选项。例如，我们可以创建一个单选框组，并使用 setAttribute 方法来选中其中一个选项：

<label>
  <input type="radio" name="fruit" value="apple">
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="pear">
  Pear
</label>

登录后复制

// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');

// 使用setAttribute方法设置单选框为选中状态
appleRadio.setAttribute("checked", "checked");

登录后复制

在上面的代码中，我们使用 querySelector 方法获取了值为 "apple" 的单选框元素，然后使用 setAttribute 方法将其设置为选中状态。

需要注意的是，使用 setAttribute 方法来设置单选框的选中状态会使 HTML 源代码中也显示出来，而使用 checked 属性则不会。此外，也建议使用 checked 属性来设置单选框的选中状态，因为它更加简洁和易于理解。

总结

在 DOM 中，设置单选框的选项可以通过 checked 属性或者 setAttribute 方法来完成。虽然两种方法都可以达到相同的效果，但建议使用 checked 属性，因为代码更加简洁、易于理解，而且操作更加方便。在实际的项目中，选用哪种方法由开发者自己决定。

以上就是javascript dom设置单选框的选项的详细内容，更多请关注Work网其它相关文章！