如何通过单击 table 行来检查单选按钮？

Question

我正在处理数据 table，其中将填充 Json 数据，我想让整行都可以点击，当我点击该行时，与之关联的单选按钮必须选中 return 单选按钮的值

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

您只需使用当前的 this 上下文即可轻松完成此操作，例如：

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

工作演示：

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

您可以使用 jQuery 来大大简化这一过程，您似乎已经包含了

$('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>

如何通过单击 table 行来检查单选按钮？

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

javascript

css

jquery

radio-button