how to check a radio button by clicking on a table row?

Question

I am working on a data table which will be filled with Json data and I want to make the entire row clickable and when I click on the line, the radio button associated with it must be checked and return the value of the radio button

 var elements= document.getElementsByTagName('tr'); for(var i=0; i<elements.length;i++) { (elements)[i].addEventListener("click", function(){ const rbs = document.querySelectorAll('input[name="choice"]'); let selectedValue; for (const rb of rbs) { if (rb.checked) { selectedValue = rb.value; break; } } alert(selectedValue); }); }

 tr:hover{ background-color:gray; cursor:pointer; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th></th> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td><input type="radio" value="Jhon doe" name="name"/></td> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td><input type="radio" value="mary Moe" name="name" /></td> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td><input type="radio" value="July dooley" name="name" /></td> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>

Answer 1

You can do this easily by just using the current this context like:

const rb = this.querySelector('input[name="choice"]');
rb.checked = true;

Working Demo:

 var elements = document.getElementsByTagName('tr'); for (var i = 0; i < elements.length; i++) { (elements)[i].addEventListener("click", function() { const rb = this.querySelector('input[name="choice"]'); rb.checked = true; let selectedValue = rb.value; alert(selectedValue); }); }

 tr:hover { background-color: gray; cursor: pointer; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th></th> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td><input type="radio" value="Jhon doe" name="choice" /></td> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td><input type="radio" value="mary Moe" name="choice" /></td> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td><input type="radio" value="July dooley" name="choice" /></td> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>

Answer 2

You can simplify this considerably using jQuery which you seem to already be including

 $('tr').click(function(e) { $(this).find(':radio').prop('checked', true); })

 tr:hover { background-color: gray; cursor: pointer; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th></th> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td><input type="radio" value="Jhon doe" name="name" /></td> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td><input type="radio" value="mary Moe" name="name" /></td> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td><input type="radio" value="July dooley" name="name" /></td> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>