Jonhz Jonhz - 5 months ago 10
jQuery Question

Images as radio button with jquery

I'm trying to make images as radio buttons with jquery. The problem that I'm having is that is behaving like checkboxes rather than radio buttons. What I wanted to do is let the user makes only ONE checked! I tried using the

siblings()
function to uncheck the other elements but it's not working!

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

$(".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. Find the anchor first before looking for .btn since the anchor is not sibling of .btn
Comments