Есть 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х модулей (ПФП, АФВ, ВРТ и ОПД) заменялся текст на ПК+
Вот возможное решение
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');
}
}
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты