1

Помогите доработать код, нужно чтобы при выборе 4 чекбоксов (от ААА до ГГГ) вместо их названий выводился "+", сейчас если любые 4 из 5 чекбокса нажимаешь, выходит плюс. А при нажатии на 5ый чекбокс "ДДД" не перечисление шло всех пяти, а 4 чекбокса первых "+" так и оставалось название + название 5го. вот так при нажатии на все 5: Мод-05+ с модулем 5. Если не выбирать любой из первых 4х чекбоксов, то тогда перечисление через запятую, если есть возможность последняя запятая в перечислении превращалась бы в союз "и".

  var polygraphs = document.querySelectorAll('.polygraph');
polygraphs.forEach(function(polygraph) {
  var fieldset = polygraph.querySelector('fieldset');
  polygraph.addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName === 'INPUT') {
      var additionalName = polygraph.querySelector('.additionalName');
      additionalName.innerText = "";

      var checkedTypes = document.querySelectorAll('.type:checked');
      checkedTypes.forEach(function(elem) {
        additionalName.innerText += " " + elem.value;
      });

      var checkedModels = fieldset.querySelectorAll('.model:checked');
      if (checkedModels.length === 4) {
        additionalName.innerText += "+";
      } else




      {
        checkedModels.forEach(function(elem, index) {
          additionalName.innerText += (index === 0 ? " с " : ", ") + elem.value;
        });
      }
    }
  });
});
<div id="polygraph_3" class="polygraph hidden"><br>

<section><input type="checkbox" class="checkbox-toggler type" data-target="list-item_1-12" value="М"><b>М</b> 
</section>
  <section><input type="checkbox" class="checkbox-toggler type" data-target="list-item_1-13" value="ПК"><b>ПК</b> <br><br></section>
  <fieldset>
    <legend>Выберите модуль</span></legend> 
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-14" value="модулем 1"><b>ААА</b> <br>    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-15" value="модулем 2"><b>БББ</b> <br>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-16" value="модулем 3"><b>ВВВ</b><br>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-17" value="модулем 4"><b>ГГГ</b> <br>
<input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-17" value="модулем 5"><b>ДДД</b> <br>
  </fieldset>

<br>




  <div class="name">
    <p>
      <b>Профессиональный «Мод-05<span class="additionalName"></span>» (или эквивалент) – 1 комплект;</b>
    </p><br>




  </div></div>

1 ответ 1

2

Если я правильно понял условия, то код будет следующий:

let polygraphs = document.querySelectorAll('.polygraph');
polygraphs.forEach((polygraph) => polygraph.addEventListener('click', fChooseConfig));

function fChooseConfig(ev) {
  if (ev.target.tagName !== 'INPUT') return;
  let result = '';
  this.querySelectorAll('.type:checked').forEach((elem) => { result += ` ${elem.value}`; });
  let models = [...this.querySelectorAll('.model')];
  let modelsChecked = models.slice(0, 4).filter((el) => el.checked);
  if (models[4].checked) {
    if (modelsChecked.length === 4) {
      result += `+ с ${models[4].value}`;
    } else {
      result += ` с ${models.filter((el) => el.checked).map((el) => el.value).join(', ')}`;
    }
  } else {
    if (modelsChecked.length === 4) {
      result += `+`;
    } else if (modelsChecked.length) {
      result += ` с ${modelsChecked.map((el) => el.value).join(', ')}`;
    }
  }
  this.querySelector('.additionalName').innerText = result.replace(/, ([^,]+?)$/gm, ' и $1');
}
<div id="polygraph_3" class="polygraph hidden">
  <br>
  <section>
    <input type="checkbox" class="checkbox-toggler type" data-target="list-item_1-12" value="М"><b>М</b>
  </section>
  <section>
    <input type="checkbox" class="checkbox-toggler type" data-target="list-item_1-13" value="ПК"><b>ПК</b>
  </section>
  <br>
  <fieldset>
    <legend>Выберите модуль</legend>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-14" value="модулем 1"><b>ААА</b><br>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-15" value="модулем 2"><b>БББ</b><br>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-16" value="модулем 3"><b>ВВВ</b><br>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-17" value="модулем 4"><b>ГГГ</b><br>
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-17" value="модулем 5"><b>ДДД</b><br>
  </fieldset>
  <br>
  <div class="name">
    <p><b>Профессиональный «Мод-05<span class="additionalName"></span>» (или эквивалент) – 1 комплект;</b></p>
    <br>
  </div>
</div>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.