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

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绑定(bind)事件处理程序:

const labels = document.querySelectorAll('.mylabel');
labels.forEach(e => {
  e.addEventListener('click', function() {
    const cb = e.parentNode.querySelector('.checkbox input');
    cb.checked = !cb.checked;
  });
});