CODEWITHSUNDEEP
jquery
Jonhz
Jonhz

Reputation: 125

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/

Upvotes: 3

Views: 56

Answers (2)

Mina Jacob
Mina Jacob

Reputation: 1951

here is the fix https://jsfiddle.net/jvtppxyf/

you need to use parent() 

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

Upvotes: 0

guradio
guradio

Reputation: 15565

$(".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

Upvotes: 3

Related Questions