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

(编辑：jimmy 日期: 2024/11/19 浏览：2)

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="/UploadFiles/2021-04-02/selector_default.png">

（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="/UploadFiles/2021-04-02/selector_default.png">

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

上一篇：搭建基于express框架运行环境的方法步骤

下一篇：微信小程序swiper实现滑动放大缩小效果