js实现点击切换checkbox背景图片

来源：互联网发布：sql数据库查询工具编辑：程序博客网时间：2024/06/05 16:36

转载自：http://www.bijishequ.com/detail/384166?p=

www.bijishequ.com

js实现点击切换checkbox背景图片

作者：Stroyer 2017-05-07 收录到我的专题

标签勾选 btn 背景图片 checkbox 切换

在制作网页的过程中，经常需要实现点击切换背景图片的效果，本文关注的是表单中checkbox背景图片切换的实现。如图，在输入用户名和密码后，用户需要选择是否记住密码

图片背景为白色表示未勾选状态，背景为蓝色表示勾选状态。

HTML源码如下：

1 <div class="check">2      <input id="checkbox1" class="checkbox" type="checkbox" checked ="checked" /><label>记住密码</label>3 </div>

其中checkbox 默认为勾选状态。

设置样式，CSS代码如下：

 1 .check{ 2         text-align: right; 3         font-size:24px; 4         height: 50px;   5         width: 150px; 6         background: url(img/btn_1.png) left center no-repeat; 7       } 8 .checkbox{ 9         width:50px;10         height: 50px;11         vertical-align: middle;12         filter:alpha(opacity=0);   13         -moz-opacity:0;   14         -khtml-opacity: 0;   15         opacity: 0;   16       }17 label {18         vertical-align: middle;19       }

将checkbox透明度设为0，再以背景图片来代替复选框就能得到带有勾选图片的效果。默认为记住密码的勾选状态，btn_1.png 即为背景为蓝色的勾选图片。值得注意的是，将 input 标签与 label 标签同时加上 vertical-align: middle; 属性才能实现文字与复选框垂直居中对齐。

接下来实现单击切换checkbox背景图片的效果，1.9版本以下的 jQuery 里的 toggle() 方法可以直接实现切换：

1 toggle(objs) {2     $(objs).each(function(){3         if ($(this).is(':hidden')) $(this).show(); else $(this).hide();4     });5 }

然而 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;        }    })});

其中 btn_2.png 为背景为白色的未勾选图片。

至此，点击复选框，就可实现背景图片的任意切换。

社区邀请

笔记社区是一个面向中高端IT开发者、程序员的知识共享社区，通过网络抓取与文章分类总结，由专家为用户提供高质量的专题文章系列。邀请您成为社区专家 >>

原文链接：http://www.cnblogs.com/zdd2017/p/6820955.html

声明：所有文章资源均从网络抓取，如果侵犯到您的著作权，请联系删除文章。联系方式请关注微信公众号PMvideo【锤子视频-程序员喜欢的短视频】，笔记社区开发者交流群 628286713。

21

September

关注微信公众号:PMvideo

.JS之正则表达式详解

.vue-cli中webpack把js文件引入index.html的过程

.纯css轮播(焦点)

.前端新人关注的Web前端饱和性分析？面试必会的十点

.从零开始,"手把手"教你写一个完整的chrome插件

.Vue.js开发常见问题

.Vuejs入门todolist项目解析

.Clipboard.js 的使用踩坑不完全记录

.你可能不知道的CSS Hacks

.2017-09-21 前端日报

前端必备HTTP技能

使用很多的web技术在客户端开发异步web应用。利用Ajax，web应用可以异步的发送数据获取数据，而不干扰现有页面的显示和行为。通过解耦数据接口层和展现层，Ajax允许web页面或者其他扩展的web应用动态的改变数据而不用重新加载整个页面。

共 12 篇文章

bootstrap的使用与方法

Bootstrap 教程 Bootstrap, 简洁、直观、强悍、移动设备优先的前端开发框架,简单。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

共 20 篇文章

web前端

关于web前端的技术内容

共 0 篇文章

前端构建工具栈之Yeoman

构建工具栈中我们通过Yeoman开发了团队的脚手架，开发者可以通过脚手架快速地进行项目搭建和组件开发，通过Gulp和Webpack进行项目的构建和打包，NPM作为团队统一的包管理工具，Sass作为CSS的预编译工具提升CSS代码的可维护性，Babel作为ES6的编译工具。

共 6 篇文章

jquery mobile教程与jquery ui学习笔记

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

共 6 篇文章

35代码实现的js流程控制

用vue2.0鲁博客的已经很多，这里主要讲讲如何快速的部署一个node+vue的博客在新浪云上(非广告，只为分享给那些需要的同学)，如果你是对这个博客感兴趣可以访问这里

共 1 篇文章

前端构建工具栈之gulp&webpack

通过Gulp和Webpack进行项目的构建和打包,gulp是前端开发过程中对代码进行构建的工具,Webpack 是当下最热门的前端资源模块化管理和打包工具.

共 16 篇文章

微信小程序入门案例和文档

微信小程序，最近声音比较大，开始慢慢学习一下这个小东西，从安装开发工具开始吧，不会JS，学起来会不会很吃力呢？本专题收集了一些微信小程序的案例

共 15 篇文章

JS红宝书

第一次读“JS红宝书”还是2015年初学JS的时候，那时候只是把语法部分读了一遍，还有一些浏览器相关知识做了下了解，大概也就读了半本的样子，就开始了用JS进行开发了，在成长的道路上遇见了JQuery，当时真的是感觉到JQuery太友好了，慢慢放下了原生开发。

共 7 篇文章

前端自动化测试Mocha&chai

通过标准化、组件化和自动化的方式能够解放生产力，让工程师和开发者聚焦在业务逻辑、技术创新上。

共 9 篇文章

精选专题

spring系列1893篇

ORM1622篇

缓存2346篇

消息中间件534篇

分布式服务1792篇

Nio框架691篇

并发编程2110篇

网络基础18925篇

搜索引擎962篇

设计模式2941篇

其他arch2837篇

计算机基础2885篇

操作系统11.2篇

开发工具3575篇

Nginx1095篇

JVM虚拟机1239篇

系统监控968篇

日志分析830篇

Hadoop5091篇

Mongodb666篇

Android开发18345篇

IOS开发640篇

移动游戏1935篇

React-Native465篇

前端基础11854篇

HTML512402篇

ReactJs102篇

AngularJs354篇

大数据18102篇

人工智能9530篇

www.bijishequ.com