html checkbox复选框更换背景,js实现点击切换checkbox背景图片的简单实例

在制作网页的过程中，经常需要实现点击切换背景图片的效果，本文关注的是表单中checkbox背景图片切换的实现。如图，在输入用户名和密码后，用户需要选择是否记住密码

图片背景为白色表示未勾选状态

，背景为蓝色表示勾选状态

。

HTML源码如下：

记住密码

其中checkbox 默认为勾选状态。

设置样式，CSS代码如下：

.check{

text-align: right;

font-size:24px;

height: 50px;

width: 150px;

background: url(img/btn_1.png) left center no-repeat;

}