jQuery: for each radio button, assign a thumbnail SRC, then use it

Question

I have a main image and some thumbnails, then some radio buttons.

I want to click the radio buttons, assign to it one of the thumbnail's SRCs in order, and change the main image SRC.

That's what I tried so far, but it only changes once (and it changes the main image for the last thumbnail's SRC, no matter what radio button do I click).

I'm a pretty clumsy coder (a survivor though), so sorry for this mess, just trying to get around it!

	jQuery(".thumbnails-group img").each(function() {  //I go through the thumbnails
	
		var imgsrc = this.src; //I get the SRC of each
		
		jQuery(".radio-buttons input:radio").each(function() {  //for each radio button

			jQuery(this).click(function () { //on click
				jQuery('#main-image').attr('src', imgsrc); //change main image SRC using variable
			});

		});
		
	});

.thumbnails-group{
  clear: both;
}
.thumbnails-group ul li{
  list-style-type: none;
  float: left;
  margin-right: 10px;
}
.thumbnails-group img{
  width: 90px;
  height: 90px;
}

.radio-buttons{
  clear: both;
  padding: 20px;
  background: #eee;
}

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

<img id="main-image" src="http://www.daz3d.com/media/catalog/product/cache/1/thumbnail/689303033aebc8cae535000c73c8db4b/h/e/heart-of-the-forest-1.jpg">

<div class="thumbnails-group">
	<ul>
		<li><img src="http://rs177.pbsrc.com/albums/w208/layla818/Forest.jpg~c200"></li>
		<li><img src="http://www.iiasa.ac.at/GenticsImageStore/200/auto/prop//web/home/research/researchPrograms/EcosystemsServicesandManagement/dreamstime_l_14610380_2.png"></li>
		<li><img src="http://rs1382.pbsrc.com/albums/ah245/PhotobucketMKTG/LOHP/Forests.jpg~c200"></li>
	</ul>
</div>

<div class="radio-buttons">
	<p>Click those (not the thumbs, but the radio buttons):</p>
	<input type='radio' id='radio_1' name='type' value='1' />
	<input type='radio' id='radio_2' name='type' value='2' />
	<input type='radio' id='radio_3' name='type' value='3' /> 
</div>

Answer 1

You can get the index of checked radio button, then the index can be used to fetch the img element at respective index.

var radios = jQuery(".radio-buttons input:radio");
radios.change(function() {
  if (this.checked) {
    var index = radios.index(this);

    imgsrc = jQuery(".thumbnails-group img").eq(index).attr('src');
    //change main image SRC using variable
    jQuery('#main-image').attr('src', imgsrc);
  }
});

.thumbnails-group {
  clear: both;
}
.thumbnails-group ul li {
  list-style-type: none;
  float: left;
  margin-right: 10px;
}
.thumbnails-group img {
  width: 90px;
  height: 90px;
}
.radio-buttons {
  clear: both;
  padding: 20px;
  background: #eee;
}

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

<img id="main-image" src="http://www.daz3d.com/media/catalog/product/cache/1/thumbnail/689303033aebc8cae535000c73c8db4b/h/e/heart-of-the-forest-1.jpg">

<div class="thumbnails-group">
  <ul>
    <li>
      <img src="http://rs177.pbsrc.com/albums/w208/layla818/Forest.jpg~c200">
    </li>
    <li>
      <img src="http://www.iiasa.ac.at/GenticsImageStore/200/auto/prop//web/home/research/researchPrograms/EcosystemsServicesandManagement/dreamstime_l_14610380_2.png">
    </li>
    <li>
      <img src="http://rs1382.pbsrc.com/albums/ah245/PhotobucketMKTG/LOHP/Forests.jpg~c200">
    </li>
  </ul>
</div>

<div class="radio-buttons">
  <p>Click those (not the thumbs, but the radio buttons):</p>
  <input type='radio' id='radio_1' name='type' value='1' />
  <input type='radio' id='radio_2' name='type' value='2' />
  <input type='radio' id='radio_3' name='type' value='3' />
</div>