jquery - 使用 jquery 将图像作为单选按钮

Question

我正在尝试使用 jquery 将图像制作为单选按钮。我遇到的问题是其行为类似于复选框而不是单选按钮。我想做的是让用户只检查一项!我尝试使用 siblings() 函数取消选中其他元素，但它不起作用!

HTML

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

<a href="#">
    <div class="btn">
        <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
        <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
    </div>
</a>

JQUERY

$(".btn").click(function() {
    $(this).find('img').toggle();
    $(this).siblings('.btn').find('.checked').hide();
    $(this).siblings('.btn').find('.normal').show();
});

fiddle :https://jsfiddle.net/1pbvafoy/

Answer 1

$(".btn").click(function() {
  $(this).find('img').toggle();
  $(this).parent('a').siblings().find('.btn .checked').hide();
  $(this).parent('a').siblings().find('.btn .normal').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

<a href="#">
  <div class="btn">
    <img class="normal" src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png" />
    <img class="checked" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" style="display:none" />
  </div>
</a>

1. 在查找 .btn 之前先找到 anchor ，因为该 anchor 不是 .btn 的同级