下面我为您详细讲解“js使用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;
}
}
要设置复选框,同样需要获取所有复选框,然后遍历它们,找到需要选中的复选框,然后给它添加 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;
}
}
要设置下拉菜单,需要先获取下拉菜单的元素,然后找到需要选中的选项,给它添加 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设置单选按钮、复选框及下拉菜单的方法”的完整攻略,希望能对你有帮助。
本文链接:http://task.lmcjl.com/news/10800.html