<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击更换复选框样式</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .box1 { width: 30px; height: 30px; position: relative; top: 10px; left: 35%; } .box1 input { width: 39px; height: 39px; position: relative; z-index: 6; opacity: 0; } .box2 { width: 38px; height: 38px; position: absolute; z-index: 5; top: 3px; left: 4px; } .box2 img { width: 100%; height: 100%; } </style> </head> <body> <div class="box1"> <input type="checkbox"> <div class="box2"> <!--- 复选框未选中时，自定义的图片 --> <img src="http://dev.ixincheng.com/xcview/images/agrees.png" /> </div> </div> <script> $('input[type="checkbox"]').click(function() { if (this.checked) { $(this).siblings('.box2').find('img').attr('src', 'http://dev.ixincheng.com/xcview/images/agree.png'); } else { $(this).siblings('.box2').find('img').attr('src', 'http://dev.ixincheng.com/xcview/images/agrees.png'); } }); </script> </body> </html>
点击复选框变换图片
2023-09-15
31
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
点击复选框变换图片
目录
相关文章
|
1月前
|
JavaScript
|
7月前
|
小程序
|
7月前
|
小程序
JavaScript
数据库
|
7月前
|
小程序
前端开发
JavaScript
|
1月前
|
JavaScript
容器
|
7月前
|
前端开发
|
9月前
|
图形学
|
9月前
|
10月前
|
移动开发
热门文章
最新文章
1
带你读《微服务架构设计模式》之一：逃离单体地狱
2
Apache Flink 零基础入门（一）：基础概念解析
3
【干货合集】从菜鸟到老司机，20篇文章带你了解DevOps！
4
SpringMVC注解@RequestParam全面解析
5
linux系统之编译内核实现iptables应用层过滤
6
openstack+essex+quantum成功show
7
Gartner：安全因素促使85%的企业年底开始部署Windows 10
8
在递归函数中因不正确使用公共变量而形成死循环
9
Redmine 数据库连接错误
10
ASP.NET MVC的客户端验证：jQuery的验证
1
基于SpringBoot+Vue的太原学院在线考试系统的详细设计和实现(源码+lw+部署文档+讲解等)
27
2
基于SpringBoot+Vue的学生管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
25
3
基于SpringBoot+Vue的宠物托管系统的详细设计和实现(源码+lw+部署文档+讲解等)
26
4
基于SpringBoot+Vue的小零食销售系统的详细设计和实现(源码+lw+部署文档+讲解等)
23
5
基于SpringBoot+Vue的家装一体化平台的详细设计和实现(源码+lw+部署文档+讲解等)
23
6
基于SpringBoot+Vue的心聘求职平台的详细设计和实现(源码+lw+部署文档+讲解等)
22
7
基于SpringBoot+Vue的智慧养老院管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
19
8
基于SpringBoot+Vue的汽配销售管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
17
9
基于SpringBoot+Vue的租车管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
17
10
基于SpringBoot+Vue的自习室座位管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
16