Question

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

_________________________________________
| o |  some label  | textarea  |    o    |
|___|______________|___________|_________|

现在，我想在单击其所在单元格时选中左侧的复选框。

我设法让这种情况发生了，但是现在不知何故，复选框本身不会（取消）检查是否被单击。

编辑，可能的解决方案：

这是我编写的javascript代码：

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

const ausgabe = document.querySelectorAll('.checkboxfirst');
ausgabe.forEach(e => {
  e.addEventListener('click', function(event) {
      const checkbox = e.parentNode.querySelector('.checkboxfirst input');
      if (event.eventPhase == '3') {
        checkbox.checked = !checkbox.checked;
      }
      checkbox.checked = !checkbox.checked;
  });
});

const cb = document.querySelectorAll('.checkbox');
cb.forEach(e => {
  e.addEventListener('click', function(event) {
      const checkbox = e.closest('tr').querySelector('.checkbox input');
      if (event.eventPhase == '3') {
        checkbox.checked = !checkbox.checked;
      }
      checkbox.checked = !checkbox.checked;
  });
});

这是html：

<table class="table table-condensed table-bordered>
  @foreach ($labels as $label) 
    <tr>
      <td class="checkboxfirst"><input type="checkbox" name="checkbox[{{ $loop->index }}]one /> 
      <td>{{ $label }}</td>
      <td class="with-textarea"><textarea></textarea></td>
      <td class="checkbox"><input type="checkbox"  name="checkbox[{{ $loop->index }}]two" /></td> 
    </tr>
  @foreach
</table>

但由于重复的checkbox.checked = !checkbox.checked，我认为这是不好的代码。

有办法避免重复代码吗？

Answer 1

我会从脑海里写东西，但是我认为发生的事情是当您单击复选框时，复选框已设置，但同时行中的事件正在还原此复选框。结果，似乎什么也没发生，而有2件事发生了。

尝试抢夺event并防止违约。如果您单击输入本身，则JS仍将对其进行处理。

const cb = document.querySelectorAll('.checkboxfirst');
cb.forEach(e => {
    e.addEventListener('click', function (event) {
       event.preventDefault();
       const checkbox = e.closest('tr').querySelector('.checkboxfirst input');
       checkbox.checked = !checkbox.checked;
    });
  });

[上面的代码在编辑过程中进行了调整]

（注意：如果这是动态列表，则可以考虑将侦听器移到变量中，以便在删除元素时可以将其删除。否则，可能会导致内存泄漏。）

[ edit ]

随着问题的扩展，这是答案的扩展部分。现在，我认为如果单击复选框，则其parentNode不是<tr>而是单元格本身，因此querySelector将无法找到.checkbox input。方法closest('tr')将找到第一个匹配的父对象（或父对象的父对象，等等）。

基本上，其他复选框也应执行相同的操作。

const cb = document.querySelectorAll('.checkbox');
cb.forEach(e => {
    e.addEventListener('click', function(event) {
       event.preventDefault();
       const checkbox = e.closest('tr').querySelector('.checkbox input');
       checkbox.checked = !checkbox.checked;
    });
  });

单击表格单元格时选中复选框

1 个答案: