Как показать дополнительный вопрос при отметке label toggle checkbox?

Question

[EVGenyK_ch]

Есть стандартный переключатель, подскажите пожалуйста как реализовать такое: при нажатии на переключатель появлялись бы доп.поля, но изначально они должны быть скрыты, если важно то все вопросы будут на переключателях
- вопрос 1
- вопрос 2
-- вопрос 2.1
-- вопрос 2.2
- вопрос 3
и т.д.

<style>
    input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 30px;
    height: 16px;
    background: #d3d3d3;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  position: absolute;
      top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
  background: #fff;
  border-radius: 40px;
  transition: 0.3s;
}

input:checked + label {
      background: #0fb877;
}

input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

label:active:after {
}
</style>
<input type="checkbox" id="switch" /><label for="switch">Toggle</label>вопрос 1
<input type="checkbox" id="switch2" /><label for="switch2">Toggle</label>вопрос 2
<input type="checkbox" id="switch2-1" /><label for="switch2-1">Toggle</label>вопрос 2.1
<input type="checkbox" id="switch2-2" /><label for="switch2-2">Toggle</label>вопрос 2.2
<input type="checkbox" id="switch3" /><label for="switch3">Toggle</label>вопрос 3

Answer 1

[Вадим]

Использовать селектор ~


Или создать модель в скрипте и по факту изменения значения в соответствующем инпуте генерировать разметку следующего вопроса и добавлять в dom.

Comments

[EVGenyK_ch]

пасиба большое , если правильно понял варик с инпутом, то такое мне не подойдет) рассматривал подобное

буду очень рад если ответишь на вопросик не в тему)) можешь подсказать как передать текст из data атрибута в поле инпута в ifram`e

[Вадим]

EVGenyK_ch, а в чём, собственно, проблема?

var frame = document.querySelector('#iframe')
var value = document.querySelector('#elementWithDataAttr').dataset('myDataAttr')
var input = frame.contentDocument.querySelector('#input')
input.value = value;

Но это сработает только если фрэйм на том же домене. Иначе, вроде, никак. Из соображений безопасности.

[EVGenyK_ch]

Вадим, можешь пожалуйста помочь?) я делаю чтото не так, у меня не выходит отправить данные из data

<a  data-fancybox="" data-small-btn="true" data-type="iframe" href="[[~17]]" data-copytitle="copytext" class="btn-send-info btn-red">click</a>

<script>
  $(document).ready(function() {
    $('.btn-send-info').on('click', function(){
        var frame = document.querySelector('iframe')
        var value = document.querySelector('#copydata_attr').dataset('copytitle')
        var input = frame.contentDocument.querySelector('#pastedata_attr')
        input.value = value;
    });
  });

</script>

[Вадим]

EVGenyK_ch, Такс, посмотрев на код и немного пофантазировав я пришёл к следующему:
1) Вы используете jQuery fancybox для модальных окон.
2) В модальном окне у Вас iframe. (не понятно, он только начинает загружаться в момент открытия или уже там всё прогружено? Это важно)
3) Где-то на странице есть отдельный элемент, у которого Id = copydata_attr (Вы мне этого не показали)

Пока что информации недостаточно чтобы предположить что не так.

[EVGenyK_ch]

Вадим, <input type="text" id="pastedata_attr">

<a  id="copydata_attr" data-fancybox="" data-small-btn="true" data-type="iframe" href="[[~17]]" data-copytitle="copytext" class="btn-send-info btn-red">click</a>

нужно ли как то использовать .val() заполнять значение поля содержимого value в инпуте?
iframe только начинает загружаться по клику на кнопку(все происходит на одном домене)
[[~17]] - это ссылка на страницу с формой
я подумал что значение из id="pastedata_attr" переносится в id="pastedata_attr"
знания js у меня 0 , извините)

[Вадим]

EVGenyK_ch, если фрэйм только начинает загружаться, то стоит дождаться окончания загрузки документа.

frame.load = function(){
  // код пропихивания значения.
}

[EVGenyK_ch]

Вадим, правильно ли я понял?)
https://jsfiddle.net/xe2Lasfb/2/

[Вадим]

EVGenyK_ch, Да

[EVGenyK_ch]

Вадим, не переносится текст(((

[Вадим]

EVGenyK_ch, Значит нужно провести дебаг.
Поставьте в начале скрипта обработчика клика, сразу после
$('.btn-send-info').on('click', function(){ debugger
Чтоб получилось так:

$('.btn-send-info').on('click', function(){
debugger
// Другой код.
};

Сохраните, откройте страницу, откройте инструменты разработчика, сделайте клик и у вас автоматически код поставится на паузу, откроется панелька для отладки и дальше шаг за шагом(F11) проверяйте что сохраняется в переменные, где есть ошибки и тд.

Не забудьте потом удалить debugger.