在 Web 开发中，默认的单选按钮样式通常比较单一，不容易与网站的整体设计风格相匹配。本文将介绍如何通过 CSS3 和 jQuery 实现自定义的单选按钮样式，提升界面的美观性和用户体验。
首先看下html部分
HTML 定义了多个单选按钮，每个按钮通过 id 和 name 属性标识。<label> 元素的 for 属性与按钮的 id 关联，用于提升无障碍性。checked 属性标记默认选中的按钮，确保页面加载时有一个按钮已选中。
然后是为该dom添加样式
label.radio 设置了单选按钮的主要样式。通过 display: inline-block 定义为行内块状元素，设置高度、宽度和圆角（border-radius: 100%）形成圆形按钮，并使用 transition 属性实现状态切换时的平滑过渡效果。
span.pip 是按钮内的选中标记，初始状态通过 transform: scale(0, 0) 设置为不可见。使用绝对定位（position: absolute）将其放置在按钮内部，并通过平滑的过渡效果在状态变化时显现。
当按钮被选中时，label.radio.on 改变背景颜色为绿色（#44c394）。同时，span.pip 的 transform 属性变为 scale(1, 1)，选中标记以正常大小显示。
隐藏原生的单选按钮。通过绝对定位和将位置移动到屏幕外（left: -9999em），仅保留自定义样式的部分供用户可见。
下面编写js部分
定义一个 jQuery 插件 $.fn.rdo()，通过 $(this).each 遍历所有的单选按钮。检查每个按钮是否是 :radio 类型，并通过 data('radio-replaced') 防止重复处理已替换过的按钮。
为每个按钮创建自定义的 <label> 和嵌套的 <span> 元素。<label> 通过 for 属性与按钮关联，<span> 用于显示选中标记。这些元素插入到按钮前面，同时为按钮添加 replaced 类名以隐藏它。
绑定 change 事件监听器。当按钮状态变化时，检查所有 <label> 元素，动态为选中状态对应的 <label> 添加 on 类名，移除未选中的样式，实现实时状态更新。
监听按钮的 focus 和 blur 事件，分别在按钮聚焦和失焦时，为 <label> 添加或移除 focus 类名，用于提供视觉上的聚焦提示。
在插件初始化时，遍历所有 <label>，检查与其关联的单选按钮是否已选中。如果是，则为 <label> 添加 on 类名，确保初始状态的样式同步。最后通过 $('radio').rdo() 应用插件到所有单选按钮。
