js实现点击切换checkbox背景图片的简单实例

更新时间：2017年05月08日 08:21:55 投稿：jingxian

下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

HTML源码如下：

<div class="check">
 <input id="checkbox1" class="checkbox" type="checkbox" checked ="checked" /><label>记住密码</label>
 </div>

其中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背景图片的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript去掉空格的方法集合
JavaScript去掉空格的方法集合，脚本之家以前发布过很多的去除空格的代码，这个更多更全面。
2010-12-12
谈谈对JavaScript原生拖放的深入理解
拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以，它涉及到两个元素。一个是被拖的元素，称为拖放源；另一个是要放的目标，称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放，感兴趣的朋友一起学习吧
2016-09-09
JS前向后瞻正则表达式定义与用法示例
这篇文章主要介绍了JS前向后瞻正则表达式定义与用法,分析了前向后瞻正则表达式的具体定义、功能及具体使用技巧,需要的朋友可以参考下
2016-12-12
Ionic如何实现下拉刷新与上拉加载功能
在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下
2016-06-06
原生JS实现多个小球碰撞反弹效果示例
这篇文章主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下
2018-01-01
JS中mouseover和mouseout多次触发问题如何解决
这篇文章主要介绍了JS中mouseover和mouseout多次触发问题如何解决的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
js实现跟随鼠标移动且带关闭功能的图片广告实例
这篇文章主要介绍了js实现跟随鼠标移动且带关闭功能的图片广告,实例分析了javascript操作鼠标事件及html元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
教你用几十行js实现很炫的canvas交互特效
HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画,这篇文章主要给大家介绍了关于用几十行js实现很炫的canvas交互特效的相关资料,需要的朋友可以参考下
2021-11-11
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
下面小编就为大家带来一篇浅谈js中startsWith 函数不能在任何浏览器兼容的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
JavaScript如何将伪数组转换成数组
这篇文章主要介绍了JavaScript如何将伪数组转换成数组，伪数组的主要特征是一个对象，并且该对象有length属性，更多参考内容，需要的小伙伴可以参考一下
2022-07-07