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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 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
php&amp;java(三)
2006/10/09 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
webpack4 处理CSS的方法示例
2018/09/03 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
github配置使用指南
2014/11/18 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python定义类self用法实例解析
2020/01/22 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python 6种方法实现单例模式
2020/12/15 Python
如何处理简单的PHP错误
2015/10/14 面试题
运动会通讯稿400字
2014/01/28 职场文书
小学开学典礼主持词
2014/03/19 职场文书
协议书格式
2014/04/23 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
大学生个人学习总结
2015/02/15 职场文书
2015年酒店工作总结
2015/04/28 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js