理解HTML单选按钮（Radio Button）
在html中，单选按钮（）用于在多个选项中选择一个。一组单选按钮通过共享相同的name属性来关联，确保用户只能选择其中一个。每个单选按钮通常有一个value属性，用于在表单提交或javascript获取时识别其值。
例如，以下代码创建了一组优先级选择的单选按钮：
获取单选按钮值
常见错误及原因分析
初学者在尝试获取选中单选按钮的值时，常会遇到返回null的问题。这通常是由于对DOM选择器和元素属性访问方式的误解造成的。
考虑以下错误的尝试：
// 假设HTML中存在name="priority"的radio按钮
function getIncorrectValue() {
// 错误尝试一：使用getElementsByName，但试图直接访问.value
// getElementsByName返回一个NodeList（类似数组），而不是单个元素
let priorityInputsByName = document.getElementsByName("priority");
console.log("尝试一结果 (NodeList):", priorityInputsByName); // 会输出NodeList
// console.log(priorityInputsByName.value); // 错误：无法直接访问NodeList的.value属性
// 错误尝试二：使用不正确的选择器语法或方法
// document.getElementsByName("input[type='radio'][name=radio]") 语法错误，
// getElementsByName只接受name属性值，不接受CSS选择器
// 即使使用querySelector，也需要指定“已选中”的状态
let priorityInputIncorrect = document.querySelector("input[type='radio'][name=priority]");
console.log("尝试二结果 (未指定:checked):", priorityInputIncorrect); // 可能返回第一个radio元素，如果未选中，则不是用户期望的
// 假设用户原始代码中的错误
// let priorityInput = document.getElementsByName("input[type='radio'][name=radio]").value;
// 这将因上述原因返回 undefined 或抛出错误
}问题根源：
立即学习“Java免费学习笔记（深入）”；
- document.getElementsByName()的返回值： 此方法返回的是一个NodeList（节点列表），即使只有一个匹配元素，它也是一个集合。你不能直接对一个集合调用.value属性。
- 未指定选中状态： 即使使用document.querySelector()，如果没有明确指定 :checked 伪类，它只会返回匹配选择器的第一个元素，而这个元素不一定是用户当前选中的。
正确获取选中单选按钮的值
要正确获取选中单选按钮的值，我们需要结合使用document.querySelector()方法和:checked伪类选择器。
- document.querySelector()： 这个方法返回文档中与指定选择器或选择器组匹配的第一个元素。
- :checked伪类： 这个CSS伪类用于选择处于选中状态的单选按钮（radio）、复选框（checkbox）或选项（option）。
将两者结合，我们可以构建一个精确的选择器来定位用户选中的单选按钮：
let selectedRadio = document.querySelector('input[type="radio"][name="priority"]:checked');这条语句的含义是：
- input[type="radio"]：选择所有类型为radio的元素。
- [name="priority"]：进一步筛选，只选择name属性为priority的元素。
- :checked：最后，从上述筛选结果中，只选择当前处于选中状态的那个。
一旦我们获取到这个选中的元素，就可以安全地访问它的value属性。
完整示例代码
下面是一个完整的HTML和JavaScript示例，演示了如何正确创建单选按钮并获取其选中值：
获取选中Radio Button值教程
选择任务优先级
注意事项与最佳实践
- 处理未选中情况： 在使用selectedRadio.value之前，始终检查selectedRadio是否为null。如果用户没有选择任何单选按钮（例如，通过JavaScript动态移除checked属性），document.querySelector('...:checked')将返回null。上述示例中的if (selectedPriorityInput)判断就是为了处理这种情况。
- 使用change事件： 如果需要实时响应用户对单选按钮的选择，而不是等待按钮点击，可以为每个单选按钮组添加change事件监听器。当组中的任何一个单选按钮的选中状态发生变化时，该事件就会触发。
- 唯一name属性： 确保每组单选按钮拥有唯一的name属性。不同组的单选按钮应有不同的name属性，否则它们会被视为同一组，导致行为异常。
- 可访问性： 始终使用
总结
获取HTML单选按钮的选中值是一个常见的JavaScript任务。关键在于理解DOM选择器的工作原理，并正确使用document.querySelector()方法结合:checked伪类。通过document.querySelector('input[type="radio"][name="yourName"]:checked').value，我们可以高效且准确地获取到用户选中的值，同时通过适当的错误处理，确保代码的健壮性。
