单击表格行上的任意位置，它将检查其所在的复选框...？答案

【问题标题】：click anywhere on a table row and it will check the checkbox its in...?单击表格行上的任意位置，它将检查其所在的复选框...？
【发布时间】：2011-04-29 14:07:44
【问题描述】：

我正试图弄清楚如何做到这一点，但我找不到。基本上我希望能够单击表格行上的任意位置，它会选中/取消选中其所在的复选框。我知道这是可能的，因为这就是 PHPMyAdmin 所做的......

这是我的表格行

<tbody>
<tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>

<tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>

</tbody>

【问题讨论】：

标签： javascript html forms

【解决方案1】：

<script type="text/javascript">
function selectRow(row)
{
    var firstInput = row.getElementsByTagName('input')[0];
    firstInput.checked = !firstInput.checked;
}
</script>

...

<tbody>
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>    
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>  
</tbody>

_{注意：您还遇到了 id 冲突。您的 ID 应该是唯一的。}

下面是编程绑定的替代方案：

document.querySelector("table").addEventListener("click", ({target}) => {
  // discard direct clicks on input elements
  if (target.nodeName === "INPUT") return;
  // get the nearest tr
  const tr = target.closest("tr");
  if (tr) {
    // if it exists, get the first checkbox
    const checkbox = tr.querySelector("input[type='checkbox']");
    if (checkbox) {
      // if it exists, toggle the checked property
      checkbox.checked = !checkbox.checked;
    }
  }
});

<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" id="chk1" name="chk1" />
      </td>
      <td>1</td>
      <td>2011-04-21 22:04:56</td>
      <td>action</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk2" name="chk2" />
      </td>
      <td>2</td>
      <td>2011-04-21 22:04:56</td>
      <td>action</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk2" name="chk3" />
      </td>
      <td>2</td>
      <td>2011-04-21 25:30:16</td>
      <td>action</td>
    </tr>
  </tbody>
</table>

【讨论】：

只是一个关于使用它的注意事项，您的复选框必须始终是表格行中的第一个输入。
...请注意，这只会设置为“true”；您需要添加一些逻辑以确保它在必要时变为“false”，请参阅下面的答案。
@saint 你的编辑是不必要的，firstInput.checked = !firstInput.checked; 已经反转了复选框的选中状态，但是在一行中这样做，而不是你使用十个的编辑。
@canon 当我直接点击复选框时，它不会改变它的状态。有什么建议可以解决这个问题吗？
点击一行时如何检查另一行是否为假？我需要一次检查一行，如果我检查另一行旧的为假，如何在这段代码中做到这一点？

【解决方案2】：

您不需要 JavaScript：

td label {
  display: block;
}

&lt;td width="20px"&gt;&lt;input type="checkbox" id="chk2" name="chk2/"&gt;&lt;/td&gt;&lt;td&gt;&lt;label for="chk2"&gt;2&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;label for="chk2"&gt;2011-04-21 22:04:56&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;label for="chk2"&gt;action&lt;/label&gt;&lt;/td&gt;

只有标签和一点 CSS。

【讨论】：

嗨 - 为什么我们需要 td 显示块？我们可以将标签应用于表格行吗？整体很棒的解决方案
默认情况下，标签只是一个内联元素，这意味着它只是它包含的文本的大小。使其成为块元素会增加整个表格单元格的可点击区域的大小。
不，您不能只将标签包裹在行周围，这将创建无效的 HTML。
感谢您的提示！
这应该被标记为正确答案。对我来说，javascript 始终是最后的手段。我个人将我的所有复选框包装在一个标签内，并将显示设置为阻止，尽管这确实增加了我保存表格的页面的大小（以字节为单位），所以我正在热身你的方法，我只是想证明我的未来工作，万一有一天我构建的新表不会奇怪地呈现，因为我忘记了所有标签都附加了这个 CSS。

【解决方案3】：

试试这个...

$("tr").click(function() {
    var checkbox = $(this).find("input[type='checkbox']");
    checkbox.attr('checked', !checkbox.attr('checked'));
});

http://jsfiddle.net/dVay8/

【讨论】：

jQuery (1.6+): $("tr").click(function() { var checkbox = $(this).find("input[type='checkbox']"); 复选框.prop('checked', !checkbox.prop('checked')); });

【解决方案4】：

由于这个问题获得了如此多的观点，并且接受的答案有一个小问题。

问题是当您单击复选框时，它不会改变。实际上发生的是复选框切换两次。因为我们也点击了复选框和表格行。所以这里有一个适当的解决方案。

$('tr').click(function(event){
    var $target = $(event.target);
    if(!$target.is('input:checkbox'))
    {
        $(this).find('input:checkbox').each(function() {
            if(this.checked) this.checked = false;
            else this.checked = true;
        })
    }
});

祝开发者好运。

【讨论】：