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>

• Yotam Salmon: Look at the network website codereview.stackexchange.com :-) On SO, this is off topic
• castletheperson: Yes, make a loop. Don't shorten the HTML (though you do need to indent it)
• Doctor Wayne: @ Yotam Salmon What is SO? @4castle If I can't shorten it is there anything that will quickly change the numbers to the next digit so I can just copy it and paste into the next line? It's already indented just fine, I just had to add 4 spaces to all of it to make it valid here and I was too lazy to indent everything with 4 spaces so I just indented everything that had to be indented....
• castletheperson: Don't give every element an id. When you use document.querySelectorAll("table input") you can use the index number instead. SO is short for "Stack Overflow"
• Doctor Wayne: @4castle How would I incorporate document.querySelectorAll("table input")? Please give me an example with my code.

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>

• castletheperson: Use the border style in CSS.
• castletheperson: Add another group of radios to the HTML, and then call bindRadios with the name. I've abstracted that for you to make it simpler.
• castletheperson: Yes. And with the "top and left functions in CSS" those should be default.
• castletheperson: You're probably having this issue. Try doing window.onload = function(){bindRadios('radio1')};
• castletheperson: Yeah... I usually edit too much. I'll answer, and then 10 minutes later think of another improvement.