在制作网页的过程中，往往需要实现点击切换背景图片的效果。本文重点介绍了在表单中切换复选框背景图片的实现。如图所示，输入用户名和密码后，用户需要选择是否记住密码

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

，背景为蓝色，表示选中状态。

HTML源代码如下：

Div class=' check '输入id=' check box 1 ' class=' checkbox ' type=' checkbox '选中=' checked '/标签记住密码/标签/div默认情况下复选框处于选中状态。

设置样式，CSS代码如下：检查{ text-align:右侧；font-size :24 px；高度： 50px；宽度： 150 px；background : URL(img/BTN _ 1 . png)左中不重复；}.复选框{ width:50px高度： 50px；垂直对齐：中间；filter:alpha(不透明度=0)；-moz-opa city 33600；-khtml-opa city 3360 0；opa city 3360 0；}标签{垂直对齐：中间；}将复选框的透明度设置为0，然后用背景图片替换复选框，以获得选中图片的效果。默认情况下，记住密码是勾选的，btn_1.png是蓝色背景的勾选图片。值得注意的是，输入标签和标签标签都添加了垂直对齐：中间；属性将文本与复选框垂直居中对齐。

接下来，单击切换复选框背景图片。1.9版以下jQuery中的toggle()方法可以直接切换：

切换(objs) { $(objs)。每个(函数(){ if ($(this))。is(' : hidden ')$(this)。show()；else $(这个)。hide()；});}但是，jquery及更高版本删除了该方法，因此可以用原生javascript实现。具体代码如下：

$(文档)。ready(function(){ var flag=1；$('.检查')。单击(function(){ if(flag==1){ $(')。检查')。CSS(‘背景’，‘URL(img/BTN _ 1 . png)左中无重复’)；标志=0；} else{ $('。检查')。CSS(‘背景’，‘URL(img/BTN _ 2 . png)左中无重复’)；标志=1；} })});上面这个js实现点击和切换复选框背景图片的简单例子，就是边肖分享的全部内容。希望能给大家一个参考，多支持我们。