0

Данный вопрос относится к уже созданной теме: Возникновение события при изменении checkbox на JavaScript

Подскажите, как сделать, чтобы при нажатии на чекбокс открывалась не одна строка с текстом, а несколько, и у каждой был прописан класс. Или, может быть, поместить каждую строку в див, для того чтобы можно было строки прописать в любое место на странице. И при клике по чекбоксу они все открывались.

Или сделать что-то вроде этого, только чтобы был не один див с индификатором и классами внутри, а 6. При клике на чекбокс появлялись одни строки в нужных мне местах. При клике на другой чекбокс появлялись другие строки.

<script>
function change(obj) {
    var elems = document.getElementById('elems').getElementsByTagName('li');
    for(i=0;i<elems.length;i++) {
      if (elems[i].className == 'off') {
         if (obj.checked)
            elems[i].style.display = 'none';
         else
            elems[i].style.display = 'list-item';
      }
   }
}
</script>

1 ответ 1

1

Чекбоксу задаешь класс .checkbox-toggler и аттрибут data-target со значением класса блока который тебе надо показывать/скрывать. Блоку(ам) соответственно нужному задать тот же класс, что в data-target

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');
    }
  }
}
.hidden {
  display: none;
}

.block-1,
.block-2 {
  padding: 5px;
  margin: 10px 0;
}

.block-1 { background-color: red; }
.block-2 { background-color: green; }
<input type="checkbox" class="checkbox-toggler" data-target="block-1">
<input type="checkbox" class="checkbox-toggler" data-target="block-2">
<div class="block-1 hidden">
  <input type="text">
</div>
<div class="block-2 hidden">
  <input type="text">
  <input type="text">
</div>
<div class="block-2 hidden">
  <input type="text">
  <input type="text">
</div>

<input type="checkbox" class="checkbox-toggler" data-target="list-item_2">

<ul>
  <li>Пункт 1</li>
  <li class="list-item_2 hidden">Пункт 2</li>
  <li>Пункт 3</li>
  <li class="list-item_2 hidden">Пункт 4</li>
  <li class="list-item_2 hidden">Пункт 5</li>
</ul>

<input type="checkbox" class="checkbox-toggler" data-target="lorem_1">
<input type="checkbox" class="checkbox-toggler" data-target="lorem_2">

<p>
  Lorem ipsum dolor sit amet, <span class="lorem_1 hidden">consectetur adipiscing elit, </span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="lorem_2 hidden">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</p>

<input type="checkbox" class="checkbox-toggler" data-target="list-item_1-1">
<input type="checkbox" class="checkbox-toggler" data-target="list-item_1-2">
<input type="checkbox" class="checkbox-toggler" data-target="list-item_1-3">
<input type="checkbox" class="checkbox-toggler" data-target="list-item_1-4">
<input type="checkbox" class="checkbox-toggler" data-target="list-item_1-5">
<input type="checkbox" class="checkbox-toggler" data-target="list-item_1-6">

<ul>
  <li class="list-item_1-1 hidden">Пункт 1</li>
  <li class="list-item_1-2 hidden">Пункт 2</li>
  <li class="list-item_1-3 hidden">Пункт 3</li>
  <li class="list-item_1-4 hidden">Пункт 4</li>
  <li class="list-item_1-5 hidden">Пункт 5</li>
  <li class="list-item_1-6 hidden">Пункт 6</li>
</ul>

13
  • Нет. Это не то. есть шаблон текста. При клике на чекбокс он добавляет нужные строчки в текст
    – Ирина
    30 авг 2017 в 14:26
  • @MedvedevDev - ну что же Вы так! Не угадали, что нужно Ирине :(.
    – user176262
    30 авг 2017 в 14:29
  • Мне нужно что бы куски текста имели свой индификатор, а не див и в нем один кусок текста. Чтобы потом мне в шаблон поместить их в нужные мне места.
    – Ирина
    30 авг 2017 в 14:31
  • Добавил пару примеров как это работает с текстом, проверь, может все же оно? Я может чего-то не понимаю, но кажется эта штука работает с любыми элементами ... 30 авг 2017 в 14:33
  • Вот вопрос и был. У меня чекбоксов 6 (как в вашем примере с пунктами). И я не могу подцепить к каждому чекбоксу свои строчки.
    – Ирина
    30 авг 2017 в 14:43

Ваш ответ

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

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