当前位置:首页 >> 网络编程

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

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="/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原始样式并实现同样的功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!