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 that you have read and understand our privacy policy and code of conduct.

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