理解单选按钮（Radio Button）的工作原理
在html中，单选按钮（）通常以组的形式出现。一个组中的所有单选按钮都必须拥有相同的name属性值，这样才能确保在同一组中，用户只能选择其中一个选项。当用户选择一个单选按钮时，该组中的其他单选按钮会自动取消选中。获取选中单选按钮的值，实际上就是找到这个组中那个被标记为“选中”的元素，并读取其value属性。
常见的获取值误区
开发者在尝试获取单选按钮值时，常遇到的问题是获取到null或undefined。这通常是由于以下原因：
- 不正确的选择器或方法： 错误地使用document.getElementsByName并期望它能像CSS选择器一样工作，或者直接对返回的NodeList（元素集合）调用.value属性。getElementsByName返回的是一个元素的集合，而不是单个元素，且它不接受复杂的CSS选择器。
- 获取时机不对： 在页面加载时就尝试获取值，而此时用户可能还没有进行任何选择。
例如，原始代码中的let priorityInput = document.getElementsByName("input[type='radio'][name=radio]").value;就是一种常见的错误。getElementsByName只接受name属性的值作为参数，而不是一个完整的CSS选择器。即使它能接受，它也会返回一个元素列表，直接访问.value是无效的。
正确获取选中单选按钮值的方法
要正确获取选中单选按钮的值，我们应该使用document.querySelector()方法结合CSS选择器中的:checked伪类。
document.querySelector() 简介
document.querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个Element。如果找不到匹配项，则返回null。这个方法非常强大，因为它支持所有标准的CSS选择器。
立即学习“前端免费学习笔记（深入）”；
使用 :checked 伪类
:checked伪类选择器用于匹配那些被用户界面上标记为“选中”状态的元素，例如、或
结合这两点，我们可以构建一个精确的选择器来定位到被选中的单选按钮： input[type="radio"][name="yourRadioGroupName"]:checked
- input[type="radio"]: 匹配所有类型为radio的元素。
- [name="yourRadioGroupName"]: 进一步筛选，只选择name属性值为yourRadioGroupName的单选按钮。
- :checked: 最后，从这些匹配的单选按钮中，只选择当前被选中的那一个。
一旦我们通过这个选择器获取到被选中的单选按钮元素，就可以直接访问其.value属性来获取其值。
示例代码
以下是一个完整的示例，演示了如何创建单选按钮组，并正确地获取其选中值：
获取选中单选按钮的值教程
任务优先级选择
当前选中的优先级：未选择
注意事项与最佳实践
- name 属性的重要性： 确保同一组单选按钮拥有相同的name属性。这是浏览器识别它们为一组并实现互斥选择的关键。
- 处理未选中的情况： 在获取值之前，务必检查document.querySelector()的返回值是否为null。如果用户尚未进行选择，或者在某些情况下没有默认选中项，querySelector可能会返回null。
-
获取时机：
- 表单提交时： 如果单选按钮是表单的一部分，通常在表单提交事件中获取其值。
- change 事件： 如果需要用户选择后立即响应，可以为每个单选按钮（或其父容器，使用事件委托）添加change事件监听器。
- 点击按钮时： 如示例所示，通过点击特定按钮来触发值获取操作。
- document.querySelectorAll()： 如果你需要获取所有单选按钮（无论是否选中）进行遍历或批量操作，可以使用document.querySelectorAll('input[name="yourRadioGroupName"]')，它会返回一个NodeList。然后你可以遍历这个NodeList来查找checked属性为true的元素。但对于获取单个选中值，querySelector更直接高效。
- 默认选中： 可以在HTML中通过添加checked属性来设置一个默认选中的单选按钮，例如：。
总结
正确获取HTML单选按钮的选中值是Web开发中的一项基本技能。通过理解单选按钮的name属性机制，并熟练运用document.querySelector()方法结合:checked伪类选择器，开发者可以准确、可靠地获取用户选择的数据。同时，考虑到获取时机和未选中情况的处理，将使你的代码更加健壮和用户友好。
