javascript - 缩短我的 JS 和 HTML 代码

Question

我这里有一些代码想缩短，我该怎么做？我应该创建一个循环吗？我是否应该创建一个内部循环不断加“1”的函数？有 3 组代码，除了数字之外，行都是相同的。拜托，我真的需要一个答案:

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. 不要使用表格布局。它们不响应移动布局，也不适合您显示的元素。如果您想要表格布局，请使用 CSS 表格布局。

2. 不要使用像 align 这样的旧的表示属性。这也应该由 CSS 处理。

3. 使用循环。这也将使您不需要为每个元素指定一个 id。

4. 使用背景图片。这将使您的 HTML 更加简洁。

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>