Показать/скрыть элемент при клике на чекбокс

Question

Форма 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>

Answer 1

Это решается и с 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>

Answer 2

Можно добавить 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>

БЛОГ НА HUSL

Показать/скрыть элемент при клике на чекбокс

Ответы (2 шт):