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()函数？

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

您还可以将给定条件传递给函数以确定是否应该显示它：

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

此外，您可能不想调用remove()函数，因为这会将其从DOM中删除，导致将来无法访问它。

Answer 2

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

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

Answer 3

如果您能够稍微更改一下HTML，则可以使用CSS轻松完成。

您可以使用~运算符选择input之后的下一个input[type=checkbox]:checked：

.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>

复选框显示/隐藏无法使用jQuery

3 个答案: