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

做外包,客户说叫我把页面做的精致点,所以咱就用了整个下午去纠结一个checkbox的样式,螺丝卒,遂作记以念其造轮之为,以戒后人,造轮大法好~ ゚ ∀゚)ノ

扯淡扯完了,就说说怎么用jQuery画checkbox吧,能来查这篇文章咱就默认你啥都不知道了,所以进入例行环节:讲原理。

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

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

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

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

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

所以我们要这样写:

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

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

在W3School中引用一句话:

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

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

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

演示

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

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

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

剩下的就是JS了,这么写:

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

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

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

没了(∫・ω・)∫。