Question

我正在处理一个将用Json数据填充的数据表，我想使整个行都可单击，当我单击该行时，必须检查与之关联的单选按钮并返回单选的值按钮

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>

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

2 个答案: