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;

}

.checkbox{

width:50px;

height: 50px;

vertical-align: middle;

filter:alpha(opacity=0);

-moz-opacity:0;

-khtml-opacity: 0;

opacity: 0;

}

label {

vertical-align: middle;

}

将checkbox透明度设为0，再以背景图片来代替复选框就能得到带有勾选图片的效果。默认为记住密码的勾选状态，btn_1.png 即为背景为蓝色的勾选图片。值得注意的是，将 input 标签与 label 标签同时加上 vertical-align: middle; 属性才能实现文字与复选框垂直居中对齐。

接下来实现单击切换checkbox背景图片的效果，1.9版本以下的 jQuery 里的 toggle() 方法可以直接实现切换：

toggle(objs) {

$(objs).each(function(){

if ($(this).is(':hidden')) $(this).show(); else $(this).hide();

});

}

然而 jQuery 1.9及以上版本已经删除了该方法，因此可以用原生 javascript 来实现，具体代码如下：

$(document).ready(function(){

var flag = 1;

$(".check").click(function(){

if(flag == 1){

$(".check").css("background","url(img/btn_1.png) left center no-repeat");

flag = 0;

} else{

$(".check").css("background","url(img/btn_2.png) left center no-repeat");

flag = 1;

}

})

});

以上这篇js实现点击切换checkbox背景图片的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

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

C#ListView控件添加Checkbox复选框并获取选中的数目,检查checkbox是否勾选
[转载]原地址:http://blog.csdn.net/lucky51222/article/details/41892429 具体方法 1.添加复选框并且如下设置 listView1.Check ...
checkbox(复选框)和radio(单选按钮)的区别与详解
选中和取消选中一个 checkbox(复选框) 后,再次点击它,即可取消选中选中一个 radio(单选按钮) 后,再次点击它,不能取消选中 <!DOCTYPE html> <ht ...
checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
js checkbox复选框实现单选功能
本文仅供学习交流使用,demo下载见文末 js checkbox复选框实现单选功能 <script type="text/javascript">$(":ch ...
js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
html复选框美化插件,js和css3超酷checkbox复选框美化插件
这是一款效果超超酷的js和css3 checkbox复选框美化插件.这个checkbox复选框美化插件最大的特点是可以拖动进行复选框的多选,当你选择一个复选框后,按住它往下拖动,下面的复选框也会被选择 ...
Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目配置项类型说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
如何让checkbox复选框只能单选
如何让checkbox复选框只能单选在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选择,所以这里只能用复选框. ...

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

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

最新文章

热门文章