js使用DOM设置单选按钮、复选框及下拉菜单的方法

下面我为您详细讲解“js使用DOM设置单选按钮、复选框及下拉菜单的方法”的完整攻略。

一、DOM设置单选按钮的方法

要设置单选按钮，首先需要获取所有单选按钮，然后遍历它们，找到需要选中的单选按钮，然后给它添加 checked 属性即可。

以下是具体代码示例：

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

// 获取所有单选按钮
var radios = document.getElementsByName('gender');

// 遍历单选按钮
for (var i = 0; i < radios.length; i++) {
  // 判断是否需要选中
  if (radios[i].value === 'female') {
    // 设置选中状态
    radios[i].checked = true;
  }
}

二、DOM设置复选框的方法

要设置复选框，同样需要获取所有复选框，然后遍历它们，找到需要选中的复选框，然后给它添加 checked 属性即可。

以下是具体代码示例：

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange

// 获取所有复选框
var checkboxes = document.getElementsByName('fruit');

// 遍历复选框
for (var i = 0; i < checkboxes.length; i++) {
  // 判断是否需要选中
  if (checkboxes[i].value === 'apple' || checkboxes[i].value === 'orange') {
    // 设置选中状态
    checkboxes[i].checked = true;
  }
}

三、DOM设置下拉菜单的方法

要设置下拉菜单，需要先获取下拉菜单的元素，然后找到需要选中的选项，给它添加 selected 属性即可。

以下是具体代码示例：

<select name="city">
  <option value="beijing">Beijing</option>
  <option value="shanghai">Shanghai</option>
  <option value="guangzhou">Guangzhou</option>
</select>

// 获取下拉菜单元素
var select = document.getElementsByName('city')[0];

// 找到需要选中的选项
for (var i = 0; i < select.options.length; i++) {
  if (select.options[i].value === 'shanghai') {
    // 设置选中状态
    select.options[i].selected = true;
  }
}

以上就是“js使用DOM设置单选按钮、复选框及下拉菜单的方法”的完整攻略，希望能对你有帮助。