上次文章中我们用jq+css实现CSS3 和 jQuery 实现自定义的单选按钮样式，本文中根据上次文章改进多选按钮checkbox，下面对代码进行逐段解析，展现如何实现一个样式化的多选框。
首先是html部分
HTML 定义了两个复选框，每个复选框都设置了唯一的 id 和 name 属性，确保标识唯一性。<label> 用于描述复选框，并通过 for 属性与按钮关联，提供更好的无障碍支持。其中，checked 属性表示复选框默认选中状态。
下面编写css部分
label.chkbox 定义复选框的基础外观，设置大小、圆角边框和背景颜色，并添加平滑的过渡效果，以增强视觉体验。
.toggle 是复选框滑块的样式，默认位于复选框的左侧。当复选框被选中时，通过 transform 的值移动滑块位置，以实现开关效果。
当复选框被选中时，label.chkbox.on 改变背景颜色为蓝色，同时滑块（.toggle）平滑地移动到右侧。
最后是定义js部分
定义一个 jQuery 插件 chkbox，遍历所有复选框。通过检查 :checkbox 类型和自定义数据 checkbox-replaced，确保每个复选框只被处理一次。为每个复选框创建 <label>、<span>、<span> 和 <span> 元素作为自定义样式的容器。
绑定 focus 和 blur 事件，当复选框聚焦或失焦时，动态切换 focus 类名，用于提供视觉提示。
初始化时，检查每个复选框的状态，并为选中的复选框添加 on 类名，确保页面加载后的样式与状态一致。最后，通过 $('checkbox').chkbox() 调用插件，对所有复选框应用自定义样式。
