HTML input radio 单选按钮 - JavaScript 编程网

在HTML中，<input type="radio">元素用于创建单选按钮，让用户从多个互斥的选项中选择一个。这些单选按钮通过共享相同的name属性值来实现互斥，意味着同一组内的单选按钮中只能有一个被选中。基本结构如下：

<input type="radio" id="option1" name="exampleGroup" value="value1">
<label for="option1">选项1</label><br>

<input type="radio" id="option2" name="exampleGroup" value="value2" checked>
<label for="option2">选项2</label><br>

<input type="radio" id="option3" name="exampleGroup" value="value3">
<label for="option3">选项3</label>

type="radio"定义了这是一个单选按钮。
id为每个单选按钮提供了一个唯一的标识，这对于关联<label>元素非常重要。
name属性值相同（如exampleGroup）的单选按钮属于同一组，保证了只能有一个被选中。
value属性指定了当该选项被选中并提交表单时，发送到服务器的值。
checked属性可选，用于指定默认被选中的项。
<label>元素通过for属性与相应的单选按钮关联，提高可访问性和用户体验，点击标签文本也会选中对应的单选按钮。

用户在这一组单选按钮中选择一个选项后，其他选项会自动取消选中状态。这在表单中用于收集用户的单项选择信息时非常有用。提交表单时，只有被选中的单选按钮的value值会被发送到服务器。

在JavaScript中，你可以通过DOM操作来控制和交互<input type="radio">元素，即单选按钮。这些操作包括检查哪个按钮被选中、设置某个按钮为选中状态，以及监听用户的选择变化等。以下是一些常见操作的示例：

获取选中项的值

// 获取所有name属性相同的radio按钮
var radios = document.getElementsByName("yourRadioGroupName");

// 遍历找到被选中的那个
for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        var selectedValue = radios[i].value;
        console.log("Selected value:", selectedValue);
        break;
    }
}

或者

document.querySelector('input[name="deliver"]:checked').value;

设置某项为选中状态

// 通过设置特定radio的checked属性为true使其成为选中状态
document.getElementById("specificRadioId").checked = true;

// 或者如果知道值，可以遍历设置
for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === "desiredValue") {
        radios[i].checked = true;
        break;
    }
}

监听单选按钮的变化

// 为每个radio添加事件监听器是不切实际的，通常监听它们的共同父元素或使用更高级的库
// 假设所有radio按钮在同一个form内
var form = document.getElementById("yourFormId");
form.addEventListener("change", function(event) {
    if (event.target.type === "radio" && event.target.name === "yourRadioGroupName") {
        var newValue = event.target.value;
        console.log("Selection changed to:", newValue);
    }
});

请注意，直接为每个<input type="radio">添加事件监听器在实践中并不常见，因为它们通常共享一个名称（name属性），并且只允许其中一个被选中。因此，监听它们共同所属的表单或容器上的变化事件，并检查触发事件的目标元素是否为期望的单选按钮，是一种更高效的做法。

修改时间 2024-06-30

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。