如何通过 jQuery/CSS 重画 checkbox 的样式

做外包，客户说叫我把页面做的精致点，所以咱就用了整个下午去纠结一个checkbox的样式，螺丝卒，遂作记以念其造轮之为，以戒后人，造轮大法好~ ﾟ ∀ﾟ)ノ 扯淡扯完了，就说说怎么用jQuery画checkbox吧，能来查这篇文章咱就默认你啥都不知道了，所以进入例行环节：讲原理。

先讲个标签，label。懂的可以跳过这部分。

如果你想写一个checkbox，可以用这样的方法来写：

<input type='checkbox' value='BALABALABALA' /> Sky是BAKA

找个记事本粘上去试一下，咱不贴演示了(其实就是懒……

请尝试在checkbox上点一下，再在提示文字上点一下。只有在checkbox上点击才有响应对不对(σ≧∀≦)σ，这样用户体验很不好对不对(σ≧∀≦)σ。

所以我们要这样写：

<label><input type='checkbox' value='BALABALABALA' /> Sky是BAKA</label>

还是，再试试点一下提示文字，这样就有响应了。

在W3School中引用一句话：

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

这是我们学习重写checkbox的知识基础。

现有的checkbox重写样式包括很多种样子，我的商单里面做了这两种：

演示

很简单明晰对不对(∫・ω・)∫。

讲一下CSS上的实现思路：因为你已经把checkbox塞在label里了，所以可以理解为整个label都能触发checkbox了，就算真正的input[type=”checkbox”]被隐藏掉了，它还是个能用的checkbox。

聪明的你一定明白了(≖ᴗ≖๑)

剩下的就是JS了，这么写：

$("#BALABALABALA").on("change", function() {
    if ($(this).is(":checked"))
        $(this).parent("label").addClass("selected");
    else
        $(this).parent("label").removeClass("selected");
});

说一下这里的第一行，不能用click事件而是要用change事件，因为不是每个用户都用鼠标触发你的标签，也有可能用键盘，所以用click就会漏掉键盘事件。

之后我推荐用addClass和removeClass，CSS是拿来控制样式的，JS是拿来控制操作逻辑的，这是一般维护者的思路，你非要用.css在这里一顿塞就可能会让其他交接的开发者觉得困惑，找不到你的样式在哪。

没了(∫・ω・)∫。