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

posted @ 2016-10-15 14:27  站住,别跑  阅读(6888)  评论(1编辑  收藏  举报