用图片替换checkbox原始样式并实现同样的功能


Posted in Javascript onNovember 15, 2018

1.结构:

<div class="box1">
<input/>

<div class="box2">


<img />

</div>
</div>

2.css里:

1)设置图片的div绝对定位,调整让它与原始input重合。

2)设置input的宽高与图片的div一样大,这样精确一点。

3)然后设置input:position:relative;再设置它的z-index,让它浮在图片那个div的上面。

4)调整两个的位置,让之重合。

5)设置input:opacity:0;

3.jq里:

$(function(){

$("input").click(function(){



if(this.checked){




$(this).siblings(".box2").find("img").attr("src","被选中的图片的src");



}else{




$(this).siblings(".box2").find("img").attr("src","未被选中的图片的src");



}


})

})

注意:siblings()里面只能有一个属性。不能siblings(".box2>img"),这样是错的。

radio修改默认样式也是同样的道理,但是在jq里就要改一些东西了,

如果想点击第一个radio之后,再点击同一个name的radio,它被选中之后,第一个radio背景变为没选中,而第二个radio背景变为被选中,还用上面的jq里 的代码是不能实现的,会出现第一个选中之后,再点第二个会让两个的背景都是被选中的图片。

所以要在判定是否被选中的时候,加上:

$(function(){

$("input").click(function(){



$("input").each(function(){




 if(this.checked){





$(this).siblings(".box2").find("img").attr("src","被选中的图片的src");




 }else{





$(this).siblings(".box2").find("img").attr("src","未被选中的图片的src");




 }



})

 })
})

需要遍历一下input

补充:

用图片替换checkbox的样式 

  由于项目的需要,需要在登录的时候保存用户名,就需要使用checkbox。其中的checkbox样式为给定的一张图片,非选中:

用图片替换checkbox原始样式并实现同样的功能

  ,选中:

用图片替换checkbox原始样式并实现同样的功能

开始准备改变checkbox的样式以达到目的,结果无终而返。因为checkbox的大小,样式很难改变,反正打不到我想要的效果。于是试图通过用图片替换checkbox的样式。

主要知识点:

 (1)通过 label 元素内点击图片,就会触发checkbox控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的checkbox控件上。

<input type="checkbox" class="clsCheckBox" ID="chkRememberPwd"/> 
<label for="chkRememberPwd"><img src="${ctx}/images/more/selector_default.png" width="38" height="38" onclick="checkbox()" /></label>
 //checkbox通过css设置为隐藏
.clsCheckBox{ 
 display:none; 
 }

(2)点击图片时通过JS进行图片的切换。代码如下:

var result = true;
 function checkbox() {
  if (result==true)
 {
 document.images[0].src = "${ctx}/images/more/selector_focus.png";
 result=false;
 }
 else if(result==false)
 {
 document.images[0].src = "${ctx}/images/more/selector_default.png"
 result=true;
 }
 }

登录页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<script>history.forward();</script>
<script type="text/javascript">
 function func_key(event){
  if (event.keyCode == 13){
    doLogin();
  }
 }
 function cleanup(o){
 o.value = "";
 o.style.textAlign="left";
 }
 var result = true;
 function checkbox() {
  if (result==true)
 {
 document.images[0].src = "${ctx}/images/more/selector_focus.png";
 result=false;
 }
 else if(result==false)
 {
 document.images[0].src = "${ctx}/images/more/selector_default.png"
 result=true;
 }
 }
</script>
<style type="text/css">
.clsCheckBox{ 
 display:none; 
} 
</style>
</head>
<body >
<div id="header">
<div id="headInfo"><span>登录</span></div>
</div>
<form>
<table class="partb" cellspacing="0" cellpadding="0">
  <tr class="partba">
  <td class="partbb">用户名</td>
  <td><input name="userClientNumber" id="userClientNumber" class="partbc" type="text" value="" onfocus="cleanup(this)"/></td>
  </tr>
  <tr class="partbe"></tr> 
  <tr class="partba">
  <td class="partbb">密码</td>
  <td><input name="userPassword" id="userPassword" class="partbc" type="password" value="" onfocus="cleanup(this)" /></td>
  </tr>
  </table>
<table style="width:450px;margin:-20px 15px;padding:0px;" width="480" border="0">
 <tr><td><input type="checkbox" class="clsCheckBox" ID="chkRememberPwd"/>
<label for="chkRememberPwd"><img src="${ctx}/images/more/selector_default.png" width="38" height="38" onclick="checkbox()" /></label>
<span style="padding-left:15px;font-size:24px;color:#999999;vertical-align:top;line-height:38px;">记住用户名</span></td>
 <td style="text-align:right;padding-right:0px;"><a href="modifyPassword!load.action" style="border-bottom: 1px solid #ffa200;"><span style="color:#ffa200;font-size:24px;">找回登录密码</span></a></td>
 </tr>
</table>
<table class="partb" style="margin-top:180px;" border="0">
 <tr>
 <td width="240" align="left" ><div class="bottondiv" ><input class="inputbotton" type="button" onclick="javascript:doLogin();" value="登 录"/></div></td>
 <td width="240" align="left"><div class="bottondiv" ><input class="inputbotton" type="button" onclick="location='register!loadRegister.action'" value="注 册"/></div></td> 
 </tr>
</table>
</form>
</body>
</html>

总结

以上所述是小编给大家介绍的用图片替换checkbox原始样式并实现同样的功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Bootstrap每天必学之媒体对象
Nov 30 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
JS实现简易留言板特效
Dec 23 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 #Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 #Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 #Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 #Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 #Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 #Javascript
You might like
php ios推送(代码)
2013/07/01 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
速记Python布尔值
2017/11/09 Python
python文件拆分与重组实例
2018/12/10 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
CSS3 简写animation
2012/05/10 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
学习决心书范文
2014/03/11 职场文书
真诚的求职信
2014/07/04 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL