单击旁边的表格单元格时选中表格中的复选框

Question

我有一个表，行看起来像这样：（'o' 是一个复选框）

_________________________________________

| o |  some label  | textarea  |    o    |

|___|______________|___________|_________|

这是它的代码：

<table class="table table-condensed table-bordered>

  @foreach ($labels as $label) 

    <tr>

      <td class="checkbox"><input type="checkbox" name="checkbox-one /> 

      <td>{{ $label }}</td>

      <td class="with-textarea"><textarea></textarea></td>

      <td class="checkbox"><input type="checkbox"  name="checkbox-two" /></td> 

    </tr>

  @foreach

</table>

当用户单击它或它旁边的“某个标签”时，如何实现选中左侧复选框？

我知道我需要 javascript，但我没有太多知识。

其他类似的问题要么很老，要么没有进一步帮助我。

Answer 1

默认情况下，单击复选框的情况已完成。对于标签，您希望向 中添加一个类<td>：<td class="mylabel">{{ label }}</td>然后使用 JS 绑定一个事件处理程序：const labels = document.querySelectorAll('.mylabel');labels.forEach(e => {&nbsp; e.addEventListener('click', function() {&nbsp; &nbsp; const cb = e.parentNode.querySelector('.checkbox input');&nbsp; &nbsp; cb.checked = !cb.checked;&nbsp; });});

Answer 2

我认为你可以在没有 JS 的情况下完成这样的工作：<table border="">&nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="checkbox" id="id-1"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="id-1">Click on me</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bla bla bla</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="checkbox" id="id-2"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="id-2">Click on me</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bla bla bla</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="checkbox" id="id-3"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="id-3">Click on me</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Bla bla bla</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </tbody></table>