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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
javascript每日必学之运算符
Feb 16 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue项目配置使用flow类型检查的步骤
Mar 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
博士208HAF收音机实习报告
2021/03/02 无线电
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python中自定义函数的教程
2015/04/27 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python实现复制大量文件功能
2019/08/31 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
详解django中Template语言
2020/02/22 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
数控技术专业推荐信
2013/11/01 职场文书
老师自我鉴定范文
2013/12/25 职场文书
计算机学生求职信范文
2014/01/30 职场文书
西门豹教学反思
2014/02/04 职场文书
摄影助理岗位职责
2014/02/07 职场文书
岗位竞聘书范文
2014/03/31 职场文书
建筑横幅标语
2014/10/09 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js