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

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>