チェックボックスの表示/非表示がjQueryで動作しない

Question

チェックボックスがオンの場合のみ、電子メールフィールドを表示します。

チェックボックスがオフの場合、電子メールフィールドは非表示にする必要があります。ここで

は私のコードは次のとおりです。

$('#chkbx').click(function() { 
    var $this = $(this); 
    if ($this.is(':checked')) { 
     $('.email').hide(); 
     $('.email').remove(); 
    } else { 
     $('.email').show(); 
    } 
}); 

<div class="form-group"> 
    <div class="col-xs-offset-3 col-xs-8"> 
     <label class="checkbox-inline col-xs-10"> 
      <input type="checkbox" ID="chkbx"> Email me the report when ready. 
     </label> 
    </div> 
</div> 
<div class="form-group email"> 
    <div class="col-xs-offset-3 col-xs-8"> 
     <div class="col-xs-8"> 
      <input type="text" class="form-control " placeholder="Enter your email"> 
     </div> 
    </div> 
</div> 

Answer 1

は、あなたがこの種の動作を処理するために設計されてtoggle()機能を使用して検討していますか？

// Show or hide depending on the state of your current checkbox element 
$('.email').toggle(this.checked); 

はまた、あなたはおそらくremove()関数を呼び出すにしたくない、として：あなたはまた、それが示さすべきかどうか判断するための関数に与えられた条件に渡すことができ

$('#chkbx').click(function() { 
     // This will show/hide your element accordingly 
     $('.email').toggle(); 
}); 

DOMから完全に削除され、今後アクセスできなくなります。

Answer 2

$('#chkbx').change(function() { 

    $('.email').toggle(); 
}); 

Answer 3

HTMLを少しでも変更できる場合は、CSSのみで簡単に行うことができます。

あなたはinput[type=checkbox]:checkedの後に来ることinput次を選択し~演算子を使用することができます。

.form-group input.form-control { 
 
    display: none; 
 
} 
 

 
.form-group input[type=checkbox]:checked ~ input.form-control { 
 
    display: block; 
 
}

<div class="form-group"> 
 
    <div class="col-xs-offset-3 col-xs-8"> 
 
     <input type="checkbox" ID="chkbx"> 
 
     <label for="chkbx" class="checkbox-inline col-xs-10">Email me the report when ready.</label> 
 
     <input type="text" class="form-control" placeholder="Enter your email"> 
 
    </div> 
 
</div>