Чекбоксы и скрытые названия в заголовки

471
03 сентября 2017, 04:53

Есть 6 чекбоксов. Каждый чекбокс имеет скрытые строки. Нужно что бы в названии документа при выборе 4х определенных чекбоксов название заменялось. То есть:

<div> 
  <input type="checkbox" class="checkbox-toggler" data-target="list-item_1-1"><b>Модификация «М»</b> 
  <input type="checkbox" class="checkbox-toggler" data-target="list-item_1-6"><b>ПК</b> 
  <fieldset style="border:2px #a3443e solid;"> 
    <legend><span style="font-family:Monotype Corsiva;color:#a3443e;font-size:25px">Выберите модель</span></legend> <input type="checkbox" class="checkbox-toggler" data-target="list-item_1-2"><b>ПФП</b> Модуль проверки функционирования полиграфа <br> 
    <input type="checkbox" class="checkbox-toggler" data-target="list-item_1-3"><b>АФВ</b> Модуль фото, аудио и видеорегистрации <br> 
    <input type="checkbox" class="checkbox-toggler" data-target="list-item_1-4"><b>ВРТ</b> Модуль ввода рукописных текстов<br> 
    <input type="checkbox" class="checkbox-toggler" data-target="list-item_1-5"><b>ОПД</b> Модуль оперативной психодиагностики<br> 
  </fieldset> 
</div> 
<div id="id1"> 
  <p> 
    <b>Профессиональный компьютерный полиграф «Диана-01<span class="list-item_1-6 hidden"> ПК</span><span class="list-item_1-2 hidden">, ПФП,</span>» (или эквивалент) – 1 комплект;</b> 
  </p>

В названии: Профессиональный компьютерный полиграф «Диана-01 В ЭТО МЕСТЕ (или эквивалент) – 1 комплект; при нажатии на определенный чекбокс шли названия чекбоксов через запятую, где это нужно (могут вообще не выбрать, а могут выбрать все чекбоксы). И при выборе сразу 4х модулей (ПФП, АФВ, ВРТ и ОПД) заменялся текст на ПК+

Answer 1

Вот возможное решение

var fieldset = document.querySelector('fieldset'); 
document.addEventListener('click', function(e){ 
  var target = e.target; 
  if(target.tagName === 'INPUT'){ 
    var additionalName = document.querySelector('.additionalName'); 
    additionalName.innerText = ""; 
     
    var checkedTypes = document.querySelectorAll('.type:checked'); 
    checkedTypes.forEach(function(elem){ 
      additionalName.innerText +=" "+elem.value; 
    }); 
     
    var checkedModels = fieldset.querySelectorAll('.model:checked'); 
    var models = fieldset.querySelectorAll('.model'); 
    if(checkedModels.length === models.length){ 
      additionalName.innerText +="+"; 
    } else { 
      checkedModels.forEach(function(elem, index){ 
        if(index === 0){ 
          additionalName.innerText +=" "+elem.value; 
        } else { 
          additionalName.innerText +=", "+elem.value; 
        }         
      }); 
    } 
  } 
});
<div> 
  <input type="checkbox" class="checkbox-toggler type" data-target="list-item_1-1" value="М"><b>Модификация «М»</b> 
  <input type="checkbox" class="checkbox-toggler type" data-target="list-item_1-6" value="ПК"><b>ПК</b> 
  <fieldset style="border:2px #a3443e solid;"> 
    <legend><span style="font-family:Monotype Corsiva;color:#a3443e;font-size:25px">Выберите модель</span></legend>  
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-2" value="ПФП"><b>ПФП</b> Модуль проверки функционирования полиграфа <br> 
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-3" value="АФВ"><b>АФВ</b> Модуль фото, аудио и видеорегистрации <br> 
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-4" value="ВРТ"><b>ВРТ</b> Модуль ввода рукописных текстов<br> 
    <input type="checkbox" class="checkbox-toggler model" data-target="list-item_1-5" value="ОПД"><b>ОПД</b> Модуль оперативной психодиагностики<br> 
  </fieldset> 
</div> 
<div id="id1"> 
  <p> 
    <b>Профессиональный компьютерный полиграф «Диана-01<span class="additionalName"></span>» (или эквивалент) – 1 комплект;</b> 
  </p>

const togglers = document.getElementsByClassName('checkbox-toggler'); 
 
for(let checkbox of togglers) { 
  checkbox.addEventListener('change', toggleOnChange); 
} 
 
function toggleOnChange() { 
  const checkbox = this, 
    checkboxTarget = checkbox.dataset.target, 
    targets = document.getElementsByClassName(checkboxTarget); 
     
  for(let target of targets) { 
    if(checkbox.checked) { 
      target.classList.remove('hidden'); 
    } else { 
      target.classList.add('hidden'); 
    } 
  } 
}

READ ALSO
Не могу обработать кириллицу

Не могу обработать кириллицу

Использую Nodejs для загрузки валют с центробанка

468
AngularJS querySelector не работает с ng-repeat

AngularJS querySelector не работает с ng-repeat

Помогите понять, почему этот код не работает:

513
Drag&amp;Drop и Click на одном блоке

Drag&Drop и Click на одном блоке

Подскажите пожалуйста

446
Ошибка при вызове метода $(&#39;#id&#39;).load()

Ошибка при вызове метода $('#id').load()

Доброго времени суток

432