以下是一个简单的例子，演示如何获取单选按钮的 DOM 对象以及如何使用它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Input Element</title>
</head>
<body>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options" value="1">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options" value="3">
<script>
// 获取单选按钮的 DOM 对象
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
// 添加事件监听器，以便在单选按钮选中状态改变时触发
option1.addEventListener("change", function() {
// 检查选中状态并输出信息
if (option1.checked) {
console.log("Option 1 selected");
}
});
option2.addEventListener("change", function() {
// 检查选中状态并输出信息
if (option2.checked) {
console.log("Option 2 selected");
}
});
option3.addEventListener("change", function() {
// 检查选中状态并输出信息
if (option3.checked) {
console.log("Option 3 selected");
}
});
</script>
</body>
</html>
在这个例子中，我们使用 addEventListener 来监听单选按钮的 change 事件。当用户选择不同的选项时，将触发相应单选按钮的事件处理程序，并输出选项的选择状态。请注意，所有单选按钮都具有相同的 name 属性，这是为了确保它们属于同一组，用户只能选择其中一个。
转载请注明出处：http://www.zyzy.cn/article/detail/4404/HTML