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的样式。

主要知识点：

 (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\"  =\"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  ns=\"http://www.w3.org/1999/xhtml\"  ns=\"http://www.w3.org/1999/html\">
<head>
<  http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
< >用户登录</ >
< >history.forward();</ >
<  type=\"text/ \">
 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;
 }
 }
</ >
<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=\"\"  =\"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=\"\"  =\"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\"  =\"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\"  =\" :doLogin();\" value=\"登 录\"/></div></td>
 <td width=\"240\" align=\"left\"><div class=\"bottondiv\" ><input class=\"inputbotton\" type=\"button\"  =\"location=\'register!loadRegister.action\'\" value=\"注 册\"/></div></td> 
 </tr>
</table>
</form>
</body>
</html>

总结

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章