jeudi 23 juin 2016

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/

Aucun commentaire:

Enregistrer un commentaire