Click checkbox to switch its background

clipboard.png

clipboard.png

clipboard.png
hover

clipboard.png
when unchecked

checkbox hides, sets a pseudo-class box, and displays the corresponding position picture in the above image according to the operation that hover checked does not check and so on.

I"ve been working on it for a long time, but I can only display one location map, and I can"t switch the location map according to my operation. There is no response to the click.
Please give us some advice.
append 1:
now you can cut to the red box of hover location by class name: hover {}, but checked disabled checked.disabled still doesn"t know how to solve it

.
Mar.24,2021

Why not the button element? The
button element can use the onclick attribute.


hide checkbox's input
use the label tag to control the input element of checkbox
put checkbox in front of label and then use checkbox's checked pseudo-class and + selector to switch label style
if you want to control subsequent elements of the same level, you can use ~ selector

wrote a simple example as follows:

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

Menu