Как отметить чекбокс при отметке другого чекбокса

Question

Есть три чекбокса

<label for="cbox1"><input id="cbox1" type="checkbox" name="char" value="1"> Один</label>
<label for="cbox2"><input id="cbox2" type="checkbox" name="char" value="2"> Два</label>
<label for="cbox3"><input id="cbox3" type="checkbox" name="char" value="3"> Три</label>

Также есть ещё три чекбокса

<input type="checkbox" id="title1" name="title">
<input type="checkbox" id="title2" name="title">
<input type="checkbox" id="title3" name="title">

Как при отметке, например, cbox1 подставлять в title1 value текст из label? А при отметке cbox2 - в title2 соответственно?

Answer 1

Если не нарушать вашу HTML разметку, то поставить значение из label checkbox'а при клике в другой checkbox можно следующим образом:

  // Обработчик клика
  function checker() {
    const targetInput = document.getElementById(`title${this.id.replace('cbox', '')}`);
    targetInput.value = this.checked ? this.closest('label').textContent : '';
  }
  // Выбираем все input с атрибутом name равному char
  document.querySelectorAll('input[name=char]').forEach(input => {
    // Каждому назначаем событие клика и его обрабатывать будет функция checker
    input.addEventListener('click', checker);
  })

<label for="cbox1"><input id="cbox1" type="checkbox" name="char" value="1"> Один</label>
<label for="cbox2"><input id="cbox2" type="checkbox" name="char" value="2"> Два</label>
<label for="cbox3"><input id="cbox3" type="checkbox" name="char" value="3"> Три</label>
<hr/>
<input type="checkbox" id="title1" name="title">
<input type="checkbox" id="title2" name="title">
<input type="checkbox" id="title3" name="title">

При клике функция выбирает нужный checbox по ID, меняя 'cbox' на 'title' и в зависимости от значения чекбокса, если выбран, проставляет зависимому чекбоксу значение textContent ближайшего элемента label, если не выбран, ставит пусто.

Т.к. само value не визуализируется, смотреть изменение можно в инструментах разработчика(F12)

БЛОГ НА HUSL

Как отметить чекбокс при отметке другого чекбокса

Ответы (1 шт):