HTML input radio 单选按钮

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

在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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
793 文章
4 教程
8 项目
随机推荐
Express.js CSRF 安全防护
Web 自定义组件
WordPress 语言文件
Node.js net 模块
JavaScript getter和setter
macOS 使用 crontab 定时任务
Nginx 的 location 设置
JavaScript screen对象