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


Posted in Javascript onMay 08, 2017

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

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

图片背景为白色表示未勾选状态 js实现点击切换checkbox背景图片的简单实例,背景为蓝色表示勾选状态 js实现点击切换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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
理解javascript中DOM事件
Dec 25 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
svg动画之动态描边效果
Feb 22 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
javascript中的隐式调用
Feb 10 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 #Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 #jQuery
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 #Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 #Javascript
Angular2中select用法之设置默认值与事件详解
May 07 #Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 #Javascript
Angular.Js中ng-include指令的使用与实现
May 07 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
追求程序速度,而不是编程的速度
2008/04/23 PHP
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Python实现批量转换文件编码的方法
2015/07/28 Python
详解Python中dict与set的使用
2015/08/10 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Django如何配置mysql数据库
2018/05/04 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python高阶爬虫实战分析
2018/07/29 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python numpy存取文件的方式
2020/04/01 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
一些.net面试题
2014/10/06 面试题
初中班级口号
2014/06/09 职场文书
手机被没收的检讨书
2014/10/04 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2016公司新年问候语
2015/11/11 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python