Shorten my JS & HTML Code

Question

I have some code here that I would like to shorten, how would I be able to do that? Should I create a loop? Should I create a function with a loop inside that keeps adding '1' each time? There are 3 groups of code who's lines are the same except for the numbers. Please, I really need an answer:

function checkit(){
var radio1img1 = document.getElementById("radio1img1");
var radio1img2 = document.getElementById("radio1img2");
var radio1img3 = document.getElementById("radio1img3");
var radio1img4 = document.getElementById("radio1img4");
var radio1img5 = document.getElementById("radio1img5");
var radio1img6 = document.getElementById("radio1img6");
var radio1img7 = document.getElementById("radio1img7");
var radio1img8 = document.getElementById("radio1img8");
var radio1img9 = document.getElementById("radio1img9");

if (radio1img1.checked){
    changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img1','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img2.checked){
    changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img2','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img3.checked){
    changeImage('img3','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img3','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img4.checked){
    changeImage('img4','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img4','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img5.checked){
    changeImage('img5','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img5','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img6.checked){
    changeImage('img6','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img6','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img7.checked){
    changeImage('img7','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img7','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img8.checked){
    changeImage('img8','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img8','http://i.imgur.com/RcuPIGF.png');
}
if (radio1img9.checked){
    changeImage('img9','http://i.imgur.com/QAUUxYF.jpg');
} else {
    changeImage('img9','http://i.imgur.com/RcuPIGF.png');
}
}

<table border="2">
<tr>
<td align="center"><b>B1</b></td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img1">
<img align="center" name="radio1" class="theimage" id="img1" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img2">
<img align="center" name="radio1" class="theimage" id="img2" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img3">
<img align="center" name="radio1" class="theimage" id="img3" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img4">
<img align="center" name="radio1" class="theimage" id="img4" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img5">
<img align="center" name="radio1" class="theimage" id="img5" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img6">
<img align="center" name="radio1" class="theimage" id="img6" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img7">
<img align="center" name="radio1" class="theimage" id="img7" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img8">
<img align="center" name="radio1" class="theimage" id="img8" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
<td>
<label>
<input onchange="checkit();" type="radio" name="radio1" id="radio1img9">
<img align="center" name="radio1" class="theimage" id="img9" height="45px" width="45px" src="http://i.imgur.com/DGofFGc.png">
</input>
</label>
 </td>
</tr>
</table>

Answer 1

1. Don't use a table layout. They aren't responsive to mobile layouts, and they don't fit the elements you're displaying. If you want a table layout, use a CSS table layout.

2. Don't use old presentational attributes like align. That should also be handled by CSS.

3. Use a loop. This will also make it so you don't need an id for every element.

4. Use background images. This will allow your HTML to be much cleaner.

bindRadios('radio1');

function bindRadios(name) {
  var radios = document.querySelectorAll('input[name="' + name + '"]');
  for (var i = 0; i < radios.length; i++) {
    radios[i].onchange = function() { checkIt(radios) };
  }
}

function checkIt(radios) {
  for (var i = 0; i < radios.length; i++) {
    radios[i].parentNode.style.backgroundImage =
      'url(' + (
        radios[i].checked 
          ? 'http://i.imgur.com/QAUUxYF.jpg' // green check
          : 'http://i.imgur.com/RcuPIGF.png' // red X
      ) + ')';
  }
}

.table {
  display: table;
  border: 2px solid black;
}
.table > label {
  display: table-cell;
  width: 65px;
  height: 45px;
  background: url('http://i.imgur.com/DGofFGc.png')
              right / 45px 45px
              no-repeat;
}
.bold {
  font-weight: bold;
}

<div class="table">
  <div class="bold">B1</div>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
  <label><input type="radio" name="radio1" /></label>
</div>