Javascript/HTML：ラジオボタンのJavaスクリプトが正しく動作しない

Question

私のJavaスクリプトとラジオボタンに問題があります。 私はラジオボタンだけをデータベースからのid値に基づいて各行で1つだけ選択することができますが、私の場合は最初の行で機能していますが、残りは最初の行の値を返すだけではありません。ラジオボタンが動的に生成されます（ラジオボタンの行の数は、データベース内のIDの数に基づいています）。

<td align = 'center'> 
<?php 
     $test = $col['id']; 
     $testing = "select training.* from training inner join rekod on training.id = rekod.id where rekod.id = '$test'"; 
     $userx = mysql_query($testing) or die (mysqli_error()); 
     $u = mysql_fetch_assoc($userx); 
     echo $u['id']; 
     echo "<input type ='radio' name='x' onchange='test1();' required id='max' value ='".$u['id']."'>";?> 

    </td><td align='center'> 
    <?php 
     $te = $col['id']; 
     $tes = "select training.* from training inner join rekod on training.id = rekod.id where rekod.id = '$te'"; 
     $us = mysql_query($tes) or die (mysqli_error()); 
     $ux = mysql_fetch_assoc($us); 
     echo $ux['id']; 

    echo "<input type ='radio' name='x1' onchange='test2();' required id='max1' value ='".$ux['id']."'>";?> 
    </td> 

は、上記のコードは次のようなものが生成されます（数がIDです）：

これは私のラジオボタンのコードです

function test1(){ 
var tes = document.getElementById('max'); 
var zes = document.getElementById('max1'); 
    alert(tes.value) 
    if(tes.checked){ 

     zes.checked = false; 
     } 
    } 

function test2(){ 
var tes = document.getElementById('max'); 
var zes = document.getElementById('max1'); 
    alert(zes.value) 
    if(zes.checked){ 

    tes.checked = false; 
    } 
} 

：以下

は私のjavaスクリプトです

私はこのようにしたい：

が、それはこのようになる：

誰かが私に私のコードで間違って何を伝えることができますか？

Answer 1

document.getElementByIdを使用していて、複数の要素にアクセスしようとしていますが、これは正しくありません。アクセスして操作する複数のDOM要素がある場合は、document.getElementsByClassNameまたはdocument.getElementsBtTagNameとする必要があります。 HTMLページでは、一意のIDを持つ要素を1つだけ持つことができます（2つの要素のIDは決して同じではありません）。

あなたの場合、ループを使用していて、同じIDをループ内のすべての要素に割り当てています。それが問題だ。

ありがとうございます。 JSロジックの必要はありません

Answer 2

あなたはループを使用している場合、あなたは、名前でラジオボタンのグループ化を使用する必要があり、両方の列のラジオの名前で同じインデックスを追加して、あなたのhtmlは

<tr> 
    <td> 
     ... 
     <input type="radio" name="x_1" .../> 
    </td> 
    <td> 
     ... 
     <input type="radio" name="x_1" .../> 
    </td> 
</tr> 
<tr> 
    <td> 
     ... 
     <input type="radio" name="x_2" .../> 
    </td> 
    <td> 
     ... 
     <input type="radio" name="x_2" .../> 
    </td> 
</tr> 

、のようにする必要があります

続きを読むinput-type-radio