Toggling images like radio buttons

Question

I'm a bit new to jQuery and javascript. I have 3 images that are being toggled on and off using these methods.

How can I toggle only one on at a time, similarly to radio buttons.

<form class="num-players-group" action="">
  <input type="hidden" id='testbutton'>

  <a href="#" class="players2">
    <img src="Assets/Menu/DOR_players_2_off.png" style="display:inline-block" class="player-btn" alt="2 off" />
    <img src="Assets/Menu/DOR_players_2_on.png" style="display:none" class="player-btn" alt="2" />
  </a>

  <a href="#" class="players3">
    <img src="Assets/Menu/DOR_players_3_off.png" style="display:inline-block" class="player-btn" alt="3 off" />
    <img src="Assets/Menu/DOR_players_3_on.png" style="display:none" class="player-btn" alt="3" />
  </a>

  <a href="#" class="players4">
    <img src="Assets/Menu/DOR_players_4_off.png" style="display:inline-block" class="player-btn" alt="4 off" />
    <img src="Assets/Menu/DOR_players_4_on.png" style="display:none" class="player-btn" alt="4" />
  </a>

</form>

and I'm using jQuery also:

$('.players2').click(function() {
  $(this).find('img').toggle();
});
$('.players3').click(function() {
  $(this).find('img').toggle();
});
$('.players4').click(function() {
  $(this).find('img').toggle();
});

Should I use something along the lines of

$('.players4').not(this).removeClass('player-btn');

have you tried this one? http://stackoverflow.com/questions/17541614/use-thumbnail-image-instead-of-radio-button — Roko C. Buljan, Oct 06 '14 at 07:23

score 0 · Answer 1 · answered Oct 06 '14 at 07:30

0

you can use something like this

JS Fiddle

$('.num-players-group a').click(function () {
    $(this).children('img').toggle();
});

answered Oct 06 '14 at 07:30

Vitorino fernandes

15,794
3
20
39

This example doesn't toggle like a radio button – Sheree Dillon Oct 27 '14 at 02:13

score 0 · Answer 2 · answered Oct 06 '14 at 07:50

Try Like: (Note: I've simplified your HTML class selectors):

$(function(){ // DOM ready
  
  var $plBtn = $('a.players');
  
  $plBtn.click(function(e){
    e.preventDefault();
    $plBtn.removeClass('selected'); // Remove selected class from all
    $(this).addClass('selected');   // Add to clicked Button
  });
  
});

a.players{
  display:inline-block;
  text-decoration:none;
  border-radius:5px;
  overflow:hidden;
}
a.players img{
  vertical-align:middle;
}
a.players img+img{ display:none; } /* Hide next sibling image */

a.players.selected img    { display:none; }  /* if selected hide red image */
a.players.selected img+img{ display:block; } /* and show the green one     */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="num-players-group" action="">
  <input type="hidden" id='testbutton'>

  <a href="#" class="players">
    <img src="//placehold.it/40x40/f00&text=2" alt="2 off" />
    <img src="//placehold.it/40x40/0ff&text=2" alt="2" />
  </a>

  <a href="#" class="players">
    <img src="//placehold.it/40x40/f00&text=3" alt="3 off" />
    <img src="//placehold.it/40x40/0ff&text=3" alt="3" />
  </a>

  <a href="#" class="players">
    <img src="//placehold.it/40x40/f00&text=4" alt="4 off" />
    <img src="//placehold.it/40x40/0ff&text=4" alt="4" />
  </a>

  </form>

P.S: the selector + selects the next sibling element.

This is perfect! I know it's probably not the most elegant way of doing it, but it's the only way I can make it work properly. Thank you! — Sheree Dillon, Oct 13 '14 at 00:24

Toggling images like radio buttons

2 Answers2