用图片替换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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
js的一些常用方法小结
Jun 29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
javascript入门教程基础篇
Nov 16 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
js 只比较时间大小的实例
Oct 26 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 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&amp;mysql(三)
2006/10/09 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
python遍历目录的方法小结
2016/04/28 Python
python 性能提升的几种方法
2016/07/15 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
python实现多线程端口扫描
2019/08/31 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
我的大学生活职业生涯规划
2014/01/02 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
市场部岗位职责
2015/02/12 职场文书
会计工作态度自我评价
2015/03/06 职场文书
公司规章制度范本
2015/08/03 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js