最近总有人问我，这个Radio到底是个啥玩意儿，别看名字里带个“电台”的意思，这玩意儿在咱们写代码或者搞产品的时候，经常能碰见。别担心，我今天就来跟大家唠唠这个东西，保证小白也能听明白。
我刚接触这玩意儿的时候，也是一头雾水。看着界面上那一堆圆圈圈，不知道点哪个点完一个，另一个就自动跳开了，这感觉特别像你在小时候玩的那种老式收音机，只能调到一个频道，调了别的频道，之前的就自动关了。这不就是Radio（射频）的字面意思嘛一选一排他。
从界面说起
咱们先从最直观的界面说起。你打开一个App或者网站，经常会看到一组选项，比如让你选性别：“男”、“女”、“保密”。你只能选一个，对？你点“男”，那个圆圈就填上了色，你再点“女”，之前的“男”就自动取消了。这就是典型的Radio Button，中文叫“单选按钮”。
我记得我第一次做这种界面的时候，就琢磨着，为啥不用复选框（Checkbox）？复选框可以多选。但 Radio 的设计初衷就是为了“互斥”。你的人生大事，总不能同时选“已婚”和“未婚”？当选项之间只能有一个被选中时，Radio 就是那个最合适的工具。
后台逻辑是怎么跑的？
后台怎么处理这个事儿？很简单，它就是把这一组 Radio 归到一个“组”里。你在页面上设置的时候，会给这一组 Radio 统一取个名字，比如都叫“gender”。
当你点选了其中一个，比如“女”，前端就会把这个信息（“gender”的值是“女”）发送给后端。后端收到这个数据后，就知道你选择了哪个，然后根据这个值去处理后续的业务逻辑。
我第一次用的时候，犯了个低级错误。我把不同的 Radio 组设置成了同一个名字，结果就是我选了A组的“喜欢”，B组的“不喜欢”居然自动给取消了。当时就懵了，感觉这玩意儿是不是坏了。
实践中的教训
后来我明白了，Radio 组是通过“名字”来关联的。只有名字一样的 Radio 才会互相影响。如果你想弄两组互不干扰的单选，那就给它们取不同的名字。
比如，一组是“性别”，另一组是“血型”，它们就得有各自的名字，这样你选了“男”不会影响到你选择“A型血”。
我记得有一次，我开发一个订单确认页面，需要选支付方式。当时我偷懒，把“支付宝”、“微信支付”、“银行卡”这些选项的 Radio 都设置了同一个组名，结果用户选了“支付宝”，再选“微信支付”，支付宝就自动取消了。用户反馈说“我他妈想用哪个就用哪个，系统怎么还给我做决定了？”
我赶紧回去把它们分成了不同的组，设定了不同的名字。这事儿让我深刻体会到，细节决定成败。虽然 Radio 看起来简单，但用不对地方，一样能把用户体验搞砸。
Radio 就是干一件事：在一堆选项里，只让你选一个。下次你再看到那些圆圈圈，就知道它背后的小逻辑了。
