私の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>

ネットワークのウェブサイトで