点击checkbox 切换其背景

Question

被选中时

hover

未选中时

checkbox隐藏，设置一个伪类box，并根据hover checked 不勾选等操作，显示上图的相应位置图片。

我弄了半天，都只能显示一个位置图出来，不能根据我的操作切换位置图。点击没有反应。
还请各位指点一二。
追加1：
现在通过 class名:hover{} 可以切到hover位置的红色框了 但是checked disabled checked.disabled还是不知道怎么解决

Answer 1

隐藏checkbox的input
使用label标签来控制checkbox的input元素
把checkbox置于label前面 再用checkbox的checked伪类和+选择器来切换label的样式
如果还要控制后面同级别的元素 可以使用~选择器

写了个简单的例子，如下：

https://jsfiddle.net/7uqd3vex/8/

Answer 2

为什么不用button元素？
button元素可以用onclick属性啊。