How to display selected HTML table row value into input type radio and checkbox using JavaScript

Question

I have a HTML table which loads information from a MySQL database and a form to add, update and load the selected row of that tabla. Some rows of this table are hidden in order to fit the table and the form into the HTML doc.

When a row is selected or clicked the fields in form are loaded with information contained in the visible and invisible rows of the table, but what I don't know how to do is set the inputs type radio and checkbox as checked. I mean, if a row has a value 3 in the hidden column "Status", how do I do to set radio input as checked, where "Widower" is in the form. also, if some checkboxes are true (or value 1) how do I set them as checked properly? Any idea?

SAMPLE OF HTML TABLE
+----+---------+---------+---------+-----+--------+----------+
| id | Name    | L-name  | Month   | Day | Status | Category |
+----+---------+---------+---------+-----+--------+----------+
| 1  | Luis    | Lopez   | January | 7   | 1      | 3        |
| 2  | Carlos  | Cooper  | March   | 12  | 3      | 1        |
| 3  | Ana     | Snow    | December| 3   | 2      | 1        |
+----+---------+---------+---------+-----+--------+----------+

I summarized the code a bit, and it works, but radio and checkboxes are needed in the script:

<!--Here's the form-->
<div class="fields">
<form action="" method="POST">
    <fieldset>
        <legend>Personal Information: </legend>
            Name: <input type="text" required name="nombre" id="name"><br>
            Last Name: <input type="text" required name="apellido" id="l-name"><br>
            <label>Birthday: </label>
            <select name="mes" id="month">
                <option value="">Choose month</option>
                <option value="January ">January </option>
                <option value="February ">February </option>
                <!--And so on till December-->
            </select>
            Day: <input type="number" name="dia" min="1" max="31" value="1" id="day"><br>
            Status:<input type="radio" name="estado" value="1" id="stage" checked> Single
                   <input type="radio" name="estado" value="2"> Married
                   <input type="radio" name="estado" value="3"> Widower
                   <input type="radio" name="estado" value="4"> Divorced<br><br>
            <fieldset>
                <legend>Category:</legend>
                    <input type="radio" name="categoria" value="1" id="tag"> Gentleman
                    <input type="radio" name="categoria" value="2" id="tag"> Lady
                    <input type="radio" name="categoria" value="3" id="tag"> young
                    <input type="radio" name="categoria" value="4" id="tag"> Child<br>
            </fieldset>
    </fieldset>

    <fieldset>
        <legend>Other Information: </legend>
        Available: 
            <input type="radio" name="yes" value="1">Yes
            <input type="radio" name="no" value="0">No<br><br>
        <fieldset>
            <legend>Skill:</legend>
                <input type="checkbox" name="skill" value="1"> HTML
                <input type="checkbox" name="skill" value="2"> JS
                <input type="checkbox" name="skill" value="3"> Python
                <input type="checkbox" name="skill" value="4"> JAVA
        </fieldset>
        <input type="reset" value="Reset">
        <input type="submit" value="Update">
        <input type="submit" name="send" value="Agregar">
    </fieldset>
</form> 
</div> <!--End field-->

<!--Here's the form-->
<div class="tabla">
    <table id="table">
        <thead>
            <th style="display:none";>id</th>
            <th>Name</th>
            <th>Last name</th>
            <th style="display:none";>Other</th>
            <th style="display:none";>Other</th>
        </thead>
        <tbody>
            <?php while($user = mysqli_fetch_array($datos)){ ?>
                <tr>
                    <td style="display:none";><?php echo $user['id']; ?></td>
                    <td><?php echo $user['nombre']; ?></td>
                    <td><?php echo $user['apellido']; ?></td>
                    <td style="display:none";><?php echo $user['mes']; ?></td>
                    <td style="display:none";><?php echo $user['dia']; ?></td>
                    <td style="display:none";><?php echo $user['estado']; ?></td>
                    <td style="display:none";><?php echo $user['categoria']; ?></td>
                </tr>
            <?php } ?>
        </tbody>
    </table>
</div> <!--End tabla-->

<!--JS to load row information to form using id-->
<script>
    var table = document.getElementById('table'),rIndex;
    for (var i = 1; i < table.rows.length; i++){
        table.rows[i].onclick = function(){
            rIndex = this.rowsIndex;
            document.getElementById("name").value = this.cells[1].innerHTML;
            document.getElementById("l-name").value = this.cells[2].innerHTML;
            document.getElementById("month").value = this.cells[3].innerHTML;
            document.getElementById("day").value = this.cells[4].innerHTML;
            document.getElementById("stage").value = this.cells[5].innerHTML;
            document.getElementById("tag").value = this.cells[6].innerHTML;
        };
    }
</script>

I've also tried something where I've created some MySQL rows to save the skills named as skill1, skill2, skill3 and so on but no succeed:

<!--radioboxes skills-->
<input type="checkbox" id="php" value="php"> PHP
<input type="checkbox" id="python" value="python"> PYTHON
<input type="checkbox" id="html" value="html"> HTML
<input type="checkbox" id="js" value="js"> JS

<!--hidden rows of the table that load the MySQL data-->
<td style="display:none";><?php echo $user['php']; ?></td>
<td style="display:none";><?php echo $user['python']; ?></td>
<td style="display:none";><?php echo $user['html']; ?></td>
<td style="display:none";><?php echo $user['js']; ?></td>

<!--js code-->
....
document.getElementById("php" + this.cells[4].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("python" + this.cells[5].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("html" + this.cells[6].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("js" + this.cells[7].innerHTML.trim().toLowerCase()).checked = true;

Answer 1

id attribute should be unique. There are four input elements with the same id so this is wrong:

<input type="radio" name="categoria" value="1" id="tag"> Gentleman
<input type="radio" name="categoria" value="2" id="tag"> Lady
<input type="radio" name="categoria" value="3" id="tag"> young
<input type="radio" name="categoria" value="4" id="tag"> Child

I assume that <?php echo $user['categoria']; ?> <?php echo $user['categoria']; ?> evaluates to some string value from known list of values and so I propose to change id s in this way:

<input type="radio" name="categoria" value="1" id="tag_gentleman"> Gentleman
<input type="radio" name="categoria" value="2" id="tag_lady"> Lady
<input type="radio" name="categoria" value="3" id="tag_young"> young
<input type="radio" name="categoria" value="4" id="tag_child"> Child

Then you can change this JS code:

document.getElementById("tag").value = this.cells[6].innerHTML;

Into this:

document.getElementById("tag_" + this.cells[6].innerHTML.trim().toLowerCase()).checked = true;

This should target and set proper radio inputs. You can set up other radio and checkbox inputs in this fashion. Also, you might want to clear state of all checkboxes before setting them up for another row.

EDIT:

I've made corrections to my code above: 1. fixed trim functions - I used it in PHP way instead of JS; 2. added toLowerCase and renamed all id s to lowercase.

There is working example in jsFiddle based on your example from PasteBin.

EDIT 2:

Working example in jsFiddle of translating multiple value list to checkboxes.