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

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 => {

  e.addEventListener('click', function() {

    const cb = e.parentNode.querySelector('.checkbox input');

    cb.checked = !cb.checked;

  });

});

Answer 2

我认为你可以在没有 JS 的情况下完成这样的工作：

<table border="">

        <tbody>

                <tr>

                        <td><input type="checkbox" id="id-1"></td>

                        <td><label for="id-1">Click on me</label></td>

                        <td>Bla bla bla</td>

                </tr>

                <tr>

                        <td><input type="checkbox" id="id-2"></td>

                        <td><label for="id-2">Click on me</label></td>

                        <td>Bla bla bla</td>

                </tr>

                <tr>

                        <td><input type="checkbox" id="id-3"></td>

                        <td><label for="id-3">Click on me</label></td>

                        <td>Bla bla bla</td>

                </tr>

        </tbody>

</table>