CODEWITHSUNDEEP
javascriptjquerycssradio-button
Alchemist
Alchemist

Reputation: 73

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

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>[email protected]</td>
      </tr>
      <tr>
      <td><input type="radio" value="mary Moe" name="name" /></td>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
      <td><input type="radio" value="July dooley" name="name" /></td>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

Upvotes: 0

Views: 1530

Answers (2)

charlietfl
charlietfl

Reputation: 171679

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>[email protected]</td>
    </tr>
    <tr>
      <td><input type="radio" value="mary Moe" name="name" /></td>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td><input type="radio" value="July dooley" name="name" /></td>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

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>[email protected]</td>
    </tr>
    <tr>
      <td><input type="radio" value="mary Moe" name="choice" /></td>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td><input type="radio" value="July dooley" name="choice" /></td>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions