0

Форма bootstrap. надо при клике на чекбокс показать div.input-email. если снять галочку то скрыть этот элемент соответственно. изначально блок с div.input-email всегда скрыт

        <div class="form-group">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="chk">
                <label class="form-check-label" for="chk">Отслеживать свою заявку</label>
            </div>
        </div>
        <!-- input-email по умолчанию скрыт (display:none)-->
        <div class="form-group input-email">
            <label for="input-email">Email</label>
            <input type="email" name="email" id="input-email" class="form-control" placeholder="Введите свой email">
        </div>

2 ответа 2

0

Можно добавить class который скрывает div и при изменении состояния checkbox удалять-добавлять этот class

document.getElementById('chk').addEventListener('change', toggleInput);

function toggleInput(evt) {
  document.querySelector('.input-email').classList.toggle('hidden-div');
}
.hidden-div {
  display: none;
}
<div class="form-group">
    <div class="form-check">
        <input type="checkbox" class="form-check-input" id="chk">
        <label class="form-check-label" for="chk">Отслеживать свою заявку</label>
    </div>
</div>
<!-- input-email по умолчанию скрыт (display:none)-->
<div class="form-group input-email hidden-div">
    <label for="input-email">Email</label>
    <input type="email" name="email" id="input-email" class="form-control" placeholder="Введите свой email">
</div>

0

Это решается и с CSS

input[name="email-value"] {
  display: none;
}

input[name="email-enabled"]:checked~input[name="email-value"] {
  display: inline-block;
}
<input type="checkbox" name="email-enabled" />
<input placeholder="Email" type="email" name="email-value" />

Специально для вас сделал CSS и под вашу верстку. Правда над внешним видом можно поработать.

#chk, #input-email{
  display: none;
}

label[for="chk"]::before{content: "⊡"; font-size: 2em; }
#chk:checked~.form-group label[for="chk"]::before{content:"⊠"}

#chk:checked~.form-group #input-email {
  display: inline-block;
}
<input type="checkbox" class="form-check-input" id="chk">
<div class="form-group">
  <div class="form-check">
    <label class="form-check-label" for="chk">Отслеживать свою заявку</label>
  </div>
</div>
<div class="form-group input-email">
  <label for="input-email">Email</label>
  <input type="email" name="email" id="input-email" class="form-control" placeholder="Введите свой email">
</div>

2
  • А вас не смущает что у ТС поля идут не один-за-другим а расположены в разных блоках?
    – InDevX
    25 ноя 2020 в 10:27
  • @InDevX изменил ответ
    – DiD
    25 ноя 2020 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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