点击页面其他区域时radio buttons自动取消选中问题求助

可能的问题原因及对应解决方法 #

• CSS样式规则缺失/冲突
  绝大多数自定义单选框出现该问题都是样式问题：你大概率只给单选框的:active、:focus状态写了选中样式，没有匹配:checked状态。点击单选框时触发了焦点/激活状态样式，点击其他区域失去焦点后，样式就消失了，实际单选框的checked属性可能是正常赋值的。
  排查方式：打开浏览器F12开发者工具，选中任意一个radio元素，手动点击选中后查看元素面板中该input的checked属性是否存在，如果属性为true只是没有展示选中效果，补充input[type="radio"]:checked + span对应的选中样式即可。
• 全局事件监听器误操作
  如果你近期新增了全局点击事件逻辑（比如点击空白处关闭弹窗、收起下拉菜单的功能），很可能逻辑中误写了重置表单、清空单选框选中状态的代码。
  排查方式：在开发者工具的Sources面板，给radio元素的checked属性添加属性变更断点，点击页面空白处触发状态消失时，就会自动定位到修改radio状态的对应JS代码。
• 表单区域意外重绘
  如果你使用了前端框架（Vue/React等），或者自己写了动态渲染表单的逻辑，要确认点击空白处是否触发了表单区域的重渲染：如果没有给单选框绑定选中值，重渲染后就会回到初始未选中状态。如果是原生JS开发，检查是否有全局点击事件中修改select容器innerHTML的操作，该操作也会清空之前的选中状态。
• 自定义交互事件阻止了默认行为
  排查你是否给包裹radio的label、或者展示文字的span加了e.preventDefault()之类的阻止默认事件的代码，导致点击时radio的checked属性没有被正确赋值。可以先在开发者工具中隐藏所有颜色span，直接点击原生radio控件测试，如果选中状态可以保留，就是自定义交互的事件逻辑有问题。

内容的提问来源于stack exchange，提问作者basi