Установите флажок, когда ячейка таблицы нажата

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;
    });
  });