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 multibox 全选
Mar 22 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Vue项目环境搭建详细总结
Sep 26 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
图片完美缩放
2006/09/07 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
python的变量与赋值详细分析
2017/11/08 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
详解python3中tkinter知识点
2018/06/21 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
使用python3实现操作串口详解
2019/01/01 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
办公室主任先进事迹
2014/01/18 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
给老婆的检讨书
2015/01/27 职场文书
研讨会通知
2015/04/27 职场文书
初中班主任工作随笔
2015/08/15 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL