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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
轮播图组件js代码
Aug 08 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
python中类的属性和方法介绍
2018/11/27 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
寄语学生的话
2014/04/10 职场文书
代领报检证委托书范本
2014/10/11 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
会计岗位职责范本
2015/04/02 职场文书
社区敬老月活动总结
2015/05/07 职场文书
学校德育工作总结2015
2015/05/11 职场文书
三八节活动主持词
2015/07/04 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL