0

Есть три checkbox, требуется, чтобы при выборе определенного checkbox, менялось содержимое одного из div. Как это возможно сделать? Может какой-то видеоурок посоветуете или статью. Заранее спасибо.

1
  • 1
    Для начала ты можешь сделать тестовый пример и выложить его в своем вопросе...
    – ksa
    Commented 27 июл. 2023 в 12:18

2 ответа 2

0

требуется, чтобы при выборе определенного 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>

5
  • Опять однобуквенные переменные... Commented 27 июл. 2023 в 13:03
  • @Petəíŕd, у меня свои предпочтения... У тебя могут быть свои...
    – ksa
    Commented 27 июл. 2023 в 13:05
  • 2
    Ну формат кода надо же соблюдать. Может в документации такого правила и нет, но всё-таки я думаю лучше называть переменные осмысленно. Ладно уж, будь как есть. Commented 27 июл. 2023 в 13:09
  • @Petəíŕd, у меня своя теория на этот счет и я ей придерживаюсь. Но тебе ее не навязываю...
    – ksa
    Commented 27 июл. 2023 в 13:18
  • Ладно, закончим. Commented 27 июл. 2023 в 13:19
0

Можно повесить обработчик на родительский класс, в котором находятся все 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>

1
  • Вроде как нужен checkbox, а не select? Commented 27 июл. 2023 в 13:03

Ваш ответ

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

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