点击复选框变换图片

简介: 点击复选框变换图片
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>点击更换复选框样式</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      .box1 {
        width: 30px;
        height: 30px;
        position: relative;
        top: 10px;
        left: 35%;
      }
      .box1 input {
        width: 39px;
        height: 39px;
        position: relative;
        z-index: 6;
        opacity: 0;
      }
      .box2 {
        width: 38px;
        height: 38px;
        position: absolute;
        z-index: 5;
        top: 3px;
        left: 4px;
      }
      .box2 img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box1">
          <input type="checkbox">
          <div class="box2">
        <!--- 复选框未选中时,自定义的图片 -->
          <img src="http://dev.ixincheng.com/xcview/images/agrees.png" />
      </div>
    </div>
    <script>
      $('input[type="checkbox"]').click(function() {
        if (this.checked) {
          $(this).siblings('.box2').find('img').attr('src',
            'http://dev.ixincheng.com/xcview/images/agree.png');
        } else {
          $(this).siblings('.box2').find('img').attr('src',
            'http://dev.ixincheng.com/xcview/images/agrees.png');
        }
      });
    </script>
  </body>
</html>
相关文章
|
6月前
|
JavaScript
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
39 0
|
小程序
小程序右上角的胶囊颜色怎么修改?
小程序右上角的胶囊颜色怎么修改?
181 0
|
4月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
52 0
|
6月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
256 3
|
图形学
点击文字显示,点击文字隐藏(3)
点击文字显示,点击文字隐藏(2)
|
JavaScript
点击文字显示,点击文字隐藏(5)
点击文字显示,点击文字隐藏(5)