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 相关文章推荐
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
vue v-model的用法解析
Oct 19 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 全文搜索和替换的实现代码
2008/07/29 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Python3搜索及替换文件中文本的方法
2015/05/22 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python随机数random模块使用指南
2016/09/09 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python导入坐标点的具体操作
2019/05/10 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
网页美工求职信
2014/02/15 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
承诺书范本大全
2015/05/04 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫