title: How to display selected HTML table row value into input type radio and checkbox using JavaScript
body: <p>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. </p>
  
  <p>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?</p>
  
  <pre><code>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        |
  +----+---------+---------+---------+-----+--------+----------+
  </code></pre>
  
  <p>I summarized the code a bit, and it works, but radio and checkboxes are needed in the script:</p>
  
  <pre><code>&lt;!--Here's the form--&gt;
  &lt;div class="fields"&gt;
  &lt;form action="" method="POST"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Personal Information: &lt;/legend&gt;
              Name: &lt;input type="text" required name="nombre" id="name"&gt;&lt;br&gt;
              Last Name: &lt;input type="text" required name="apellido" id="l-name"&gt;&lt;br&gt;
              &lt;label&gt;Birthday: &lt;/label&gt;
              &lt;select name="mes" id="month"&gt;
                  &lt;option value=""&gt;Choose month&lt;/option&gt;
                  &lt;option value="January "&gt;January &lt;/option&gt;
                  &lt;option value="February "&gt;February &lt;/option&gt;
                  &lt;!--And so on till December--&gt;
              &lt;/select&gt;
              Day: &lt;input type="number" name="dia" min="1" max="31" value="1" id="day"&gt;&lt;br&gt;
              Status:&lt;input type="radio" name="estado" value="1" id="stage" checked&gt; Single
                     &lt;input type="radio" name="estado" value="2"&gt; Married
                     &lt;input type="radio" name="estado" value="3"&gt; Widower
                     &lt;input type="radio" name="estado" value="4"&gt; Divorced&lt;br&gt;&lt;br&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Category:&lt;/legend&gt;
                      &lt;input type="radio" name="categoria" value="1" id="tag"&gt; Gentleman
                      &lt;input type="radio" name="categoria" value="2" id="tag"&gt; Lady
                      &lt;input type="radio" name="categoria" value="3" id="tag"&gt; young
                      &lt;input type="radio" name="categoria" value="4" id="tag"&gt; Child&lt;br&gt;
              &lt;/fieldset&gt;
      &lt;/fieldset&gt;
  
      &lt;fieldset&gt;
          &lt;legend&gt;Other Information: &lt;/legend&gt;
          Available: 
              &lt;input type="radio" name="yes" value="1"&gt;Yes
              &lt;input type="radio" name="no" value="0"&gt;No&lt;br&gt;&lt;br&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Skill:&lt;/legend&gt;
                  &lt;input type="checkbox" name="skill" value="1"&gt; HTML
                  &lt;input type="checkbox" name="skill" value="2"&gt; JS
                  &lt;input type="checkbox" name="skill" value="3"&gt; Python
                  &lt;input type="checkbox" name="skill" value="4"&gt; JAVA
          &lt;/fieldset&gt;
          &lt;input type="reset" value="Reset"&gt;
          &lt;input type="submit" value="Update"&gt;
          &lt;input type="submit" name="send" value="Agregar"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt; 
  &lt;/div&gt; &lt;!--End field--&gt;
  
  &lt;!--Here's the form--&gt;
  &lt;div class="tabla"&gt;
      &lt;table id="table"&gt;
          &lt;thead&gt;
              &lt;th style="display:none";&gt;id&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Last name&lt;/th&gt;
              &lt;th style="display:none";&gt;Other&lt;/th&gt;
              &lt;th style="display:none";&gt;Other&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;?php while($user = mysqli_fetch_array($datos)){ ?&gt;
                  &lt;tr&gt;
                      &lt;td style="display:none";&gt;&lt;?php echo $user['id']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $user['nombre']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $user['apellido']; ?&gt;&lt;/td&gt;
                      &lt;td style="display:none";&gt;&lt;?php echo $user['mes']; ?&gt;&lt;/td&gt;
                      &lt;td style="display:none";&gt;&lt;?php echo $user['dia']; ?&gt;&lt;/td&gt;
                      &lt;td style="display:none";&gt;&lt;?php echo $user['estado']; ?&gt;&lt;/td&gt;
                      &lt;td style="display:none";&gt;&lt;?php echo $user['categoria']; ?&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;?php } ?&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt; &lt;!--End tabla--&gt;
  
  &lt;!--JS to load row information to form using id--&gt;
  &lt;script&gt;
      var table = document.getElementById('table'),rIndex;
      for (var i = 1; i &lt; 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;
          };
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;!--radioboxes skills--&gt;
  &lt;input type="checkbox" id="php" value="php"&gt; PHP
  &lt;input type="checkbox" id="python" value="python"&gt; PYTHON
  &lt;input type="checkbox" id="html" value="html"&gt; HTML
  &lt;input type="checkbox" id="js" value="js"&gt; JS
  
  &lt;!--hidden rows of the table that load the MySQL data--&gt;
  &lt;td style="display:none";&gt;&lt;?php echo $user['php']; ?&gt;&lt;/td&gt;
  &lt;td style="display:none";&gt;&lt;?php echo $user['python']; ?&gt;&lt;/td&gt;
  &lt;td style="display:none";&gt;&lt;?php echo $user['html']; ?&gt;&lt;/td&gt;
  &lt;td style="display:none";&gt;&lt;?php echo $user['js']; ?&gt;&lt;/td&gt;
  
  &lt;!--js code--&gt;
  ....
  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;
  </code></pre>