如何使用JavaScript技巧获取并控制Radio和Select元素的属性？

JavaScript 获取 Radio 和 Select 的属性并控制

获取单选按钮 (Radio) 的属性

在 HTML 表单中，单选按钮（Radio）通常用于让用户从一组选项中选择一个，使用 JavaScript，我们可以轻松获取选中的单选按钮的属性，以下是如何做到这一点的示例代码：

示例代码

<!HTML部分 >
<form id="myForm">
    <input type="radio" name="color" value="red"> Red<br>
    <input type="radio" name="color" value="green"> Green<br>
    <input type="radio" name="color" value="blue"> Blue<br>
</form>
<button onclick="getSelectedRadio()">提交</button>

// JavaScript部分
function getSelectedRadio() {
    var form = document.getElementById('myForm');
    var radios = form.elements['color'];
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) { // 检查是否被选中
            alert("选中的值是： " + radios[i].value);
            break;
        }
    }
}

当用户点击“提交”按钮时，getSelectedRadio函数会遍历所有名为color的单选按钮，并找出被选中的那一个，然后显示它的值。

获取下拉选择框 (Select) 的属性

下拉选择框（Select）允许用户从一个下拉列表中选择一个或多个选项，我们可以使用 JavaScript 来获取选中的选项的属性。

示例代码

<!HTML部分 >
<select id="mySelect" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
</select>
<button onclick="getSelectedOptions()">提交</button>

// JavaScript部分
function getSelectedOptions() {
    var select = document.getElementById('mySelect');
    var selectedOptions = [];
    for (var i = 0; i < select.options.length; i++) {
        if (select.options[i].selected) { // 检查是否被选中
            selectedOptions.push(select.options[i].value);
        }
    }
    alert("选中的值是： " + selectedOptions.join(', '));
}

在这个例子中，getSelectedOptions函数将遍历所有的option元素，并收集所有选中的选项的值，由于multiple属性的存在，用户可以选择一个或多个选项。

相关问题与解答栏目

Q1: 如果单选按钮没有使用name 属性进行分组，JavaScript 如何获取选中的单选按钮？

A1: 如果单选按钮没有使用name 属性进行分组，那么它们实际上不会互相排斥，每个单选按钮都可以独立地被选中，在这种情况下，你需要分别检查每个单选按钮的checked 属性。

var radio1 = document.getElementById('radio1');
var radio2 = document.getElementById('radio2');
if (radio1.checked) {
    alert(radio1.value);
} else if (radio2.checked) {
    alert(radio2.value);
}

Q2: 如何使用 JavaScript 设置下拉选择框 (Select) 的默认选中项？

A2: 要设置下拉选择框的默认选中项，你可以使用selectedIndex 属性或者通过修改每个option 元素的selected 属性来实现，以下是两种方法的示例：

使用selectedIndex:

document.getElementById('mySelect').selectedIndex = 1; // 将第二个选项设置为选中状态

通过修改option 元素的selected 属性：

var select = document.getElementById('mySelect');
for (var i = 0; i < select.options.length; i++) {
    select.options[i].selected = false; // 首先确保所有选项都不被选中
}
select.options[1].selected = true; // 然后设置第二个选项为选中状态