Как установить / снять отметку с 3 дополнительных флажков в соответствии с 1 основным флажком (19 раз)?

Question

У меня есть 19 карточек из 4 флажков: 1 основной флажок (дата) и 3 вспомогательных флажка (варианты на эту дату).Я хотел бы, чтобы при проверке основной опции были проверены 3 вторичные опции, и наоборот, чтобы они не были отмечены, когда не проверена основная.Я хотел бы использовать одну функцию для всех 19 карт.Однако у флажков есть разные идентификаторы.

Когда я нажимаю на главный флажок, я получаю идентификатор из основного флажка.Я получаю номер, содержащийся в идентификаторе.Я применяю его к трем значениям, чтобы создать id 3 вторичных флажков.Если установлен основной флажок: я отмечаю дополнительные флажки.Если основной флажок снят: я снял дополнительные флажки.

Я пробовал с помощью "onclick" и "onchange".

function Autocheck(id) {

  var clicked_id = id;
  var StgNbr = clicked_id.substr(4);

  var diner = "Dîner" + StgNbr;
  var souper = "Souper" + StgNbr;
  var logement = "Logement" + StgNbr;

  if (clicked_id.checked = true) {
    alert('je suis coché');
    var items = document.getElementsByClassName('presence');
    for (var i = 0; i < items.length; i++) {

      if (items[i].id == diner)
        items[i].checked = true;
      if (items[i].id == souper)
        items[i].checked = true;
      if (items[i].id == logement)
        items[i].checked = true;
    }



  } else {
    alert('je suis décoché');
    var items = document.getElementsByClassName('presence');
    for (var i = 0; i < items.length; i++) {

      if (items[i].id == diner)
        items[i].checked = false;
      if (items[i].id == souper)
        items[i].checked = false;
      if (items[i].id == logement)
        items[i].checked = false;
    }

  }

}

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="card">
      <label for="date1"><div class="card-media"><input type="checkbox" id="date1" class="date presence" name="Dates" onclick="Autocheck(this.id)">&nbsp; &nbsp;Mardi 23/07</div></label>
      <div class="card-details">
        <input type="checkbox" class="presence" name="Dîner" id="Dîner1">
        <label for="Dîner1">&nbsp; &nbsp;Dîner</label><br>
        <input type="checkbox" class="presence" name="Souper" id="Souper1">
        <label for="Souper">&nbsp; &nbsp;Souper</label><br>
        <input type="checkbox" class="presence" name="Logement" id="Logement1">
        <label for="Logement">&nbsp; &nbsp;Logement</label><br>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="card">
      <label for="date2"><div class="card-media"><input type="checkbox" id="date2" class="date presence" name="Dates" onchange="Autocheck(this.id)">&nbsp; &nbsp;Mercredi 24/07</div></label>
      <div class="card-details">
        <input type="checkbox" class="presence" name="Dîner" id="Dîner2">
        <label for="Dîner2">&nbsp; &nbsp;Dîner</label><br>
        <input type="checkbox" class="presence" name="Souper" id="Souper2">
        <label for="Souper2">&nbsp; &nbsp;Souper</label><br>
        <input type="checkbox" class="presence" name="Logement" id="Logement2">
        <label for="Logement2">&nbsp; &nbsp;Logement</label><br>
      </div>
    </div>
  </div>

Мои дополнительные флажки хорошо проверены, но они не сняты.Кроме того: мое «тестовое» предупреждение всегда говорит о том, что основной флажок установлен, даже если я снял его.

Спасибо за вашу помощь.

Answer 1

В вашем коде есть две основные проблемы:

if (clicked_id.checked = true) {

выполняет присваивание вместо сравнения, но, что более важно, clicked_id является строкой , а строковые значения не имеют свойства checked. Вам нужно будет получить доступ к свойству checked фактического элемента, либо передав элемент в качестве аргумента функции (предпочтительно), либо выполните

var element = document.getElementById(clicked_id);
//...
if (element.checked) {
  // ...
}

---

Сказав это, более гибкий подход, который работает с любым количеством флажков без необходимости обновления кода, выглядит следующим образом:

• Найти ближайшего общего предка
• Найти все флажки у этого предка

Пример: * * один тысяча двадцать-одна

function Autocheck(element) {
  var ancestor = element.closest('.card');
  if (ancestor) {
    Array.from(ancestor.querySelectorAll('.presence')).forEach(function(input) {
      input.checked = element.checked;
    });
  }
}

и используйте его как

<input type="checkbox" id="date1" class="date presence" name="Dates" onclick="Autocheck(this)">

Answer 2

Вот прослушиватель щелчков, и при щелчке основного флажка мы устанавливаем / снимаем флажки дочерних элементов. Это то, что вы ищете?

const getParentCard = (e, classToMatch) => {
  while( e.classList.contains(classToMatch) === false) 
  {
    e = e.parentNode;
  }
  return e;
};
document.addEventListener('click', (e) => {
  if(e.target.matches('input.date')){  
    getParentCard(e.target,'card').querySelectorAll('input[type="checkbox"]').forEach(chk => {
      chk.checked = e.target.checked;
    });
  }
  
});

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="card">
      <label for="date1">
        <div class="card-media">
          <input type="checkbox" id="date1" class="date presence" name="Dates">&nbsp; &nbsp;Mardi 23/07
         </div>
       </label>
      <div class="card-details">
        <input type="checkbox" class="presence" name="Dîner" id="Dîner1">
        <label for="Dîner1">&nbsp; &nbsp;Dîner</label><br>
        <input type="checkbox" class="presence" name="Souper" id="Souper1">
        <label for="Souper">&nbsp; &nbsp;Souper</label><br>
        <input type="checkbox" class="presence" name="Logement" id="Logement1">
        <label for="Logement">&nbsp; &nbsp;Logement</label><br>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <div class="card">
      <label for="date2"><div class="card-media"><input type="checkbox" id="date2" class="date presence" name="Dates">&nbsp; &nbsp;Mercredi 24/07</div></label>
      <div class="card-details">
        <input type="checkbox" class="presence" name="Dîner" id="Dîner2">
        <label for="Dîner2">&nbsp; &nbsp;Dîner</label><br>
        <input type="checkbox" class="presence" name="Souper" id="Souper2">
        <label for="Souper2">&nbsp; &nbsp;Souper</label><br>
        <input type="checkbox" class="presence" name="Logement" id="Logement2">
        <label for="Logement2">&nbsp; &nbsp;Logement</label><br>
      </div>
    </div>
  </div>