Есть три checkbox, требуется, чтобы при выборе определенного checkbox, менялось содержимое одного из div. Как это возможно сделать? Может какой-то видеоурок посоветуете или статью. Заранее спасибо.
Можно повесить обработчик на родительский класс, в котором находятся все checkbox. При нажатии на checkbox будет производится проверка для вставки или удаления текста:
const checkboxes = document.querySelector('.checkboxes');
const boxes = document.querySelectorAll('.box');
checkboxes.addEventListener('change', function (e) { //При изменении checkbox срабатывает слушатель
const box = boxes[e.target.value - 1];
if (e.target.checked) { //Отмечен ли checkbox?
box.innerHTML = '<p class="text">В этом блоке появился текст</p>';
} else {
const text = box.querySelector('.text');
text.remove();
}
}).container {
display: flex;
}
.box {
width: 150px;
height: 150px;
margin: 10px;
background: #0f0;
display: flex;
align-items: center;
text-align: center;
}<div class="checkboxes">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>требуется, чтобы при выборе определенного checkbox, менялось содержимое одного из div. Как это возможно сделать?
Вариантов масса! Вот один из таких вариантов...
document.querySelector('section').addEventListener('input', e => {
const o = e.target
document.querySelector('div').innerHTML = o.checked
? document.querySelector(`[data-value="${o.value}"]`)?.innerHTML ?? ''
: ''
})<section>
<input type='checkbox' />
<input type='checkbox' value='test' />
<input type='checkbox' />
<template data-value='test'>
<p>Любой контент...</p>
</template>
</section>
<div></div>