Javascript / HTML：单选按钮的Java脚本无法正常工作

Question

I have a problem with my java script and radio button. I want to make radio button only can be choose only one in each row based on the id value from database, but in my case the function is working on the first row but the rest is not because it only return the first row value. the radio button is generate dynamically(the count of radio button row is based on how many id in db).

below is my java script:

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;
    }
}

This is my radio button code:

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

The code above will generate something like this (the number is id):

I want to make like this:

but it become like this:

can someone tell me what wrong with my code ?

Answer 1

You are using document.getElementById and trying to access multiple elements, that is not correct. If you have multiple DOM elements to access and manipulate then you need to go with document.getElementsByClassName or document.getElementsBtTagName . In an HTML page, you can have only one element with a unique id (id of two elements can never be same).

In your case, you are using a loop and assigning the same id to all elements in the loop. That is the problem.

Thank you.

Answer 2

There is no need of JS logic, you have to use radio button grouping by name, if you are using loop then append same index in radio's name for both columns and then your html should be like,

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

Read more about input-type-radio