Question

如果选中checkbox，我想显示输入（type = email）。如果没有检查，我想隐藏它。我的问题是，输入字段始终可见。

jQuery的：

$("#newsletterCheckbox").change(function () {
   if ($(this).is(":checked")) {
      $("#newsletterInputfield").show();
   } else {
      $("#newsletterInputfield").hide();
   }
});

HTML：

<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter

...

<div id="newsletterInputfield">
    <input type="email" placeholder="Email*" id="email" class="inputFields"  />
</div>

我已尝试This以及其他许多例子。提前谢谢。

Answer 1

将此style="display:none"添加到#newsletterInputfield

    $("#newsletterCheckbox").change(function () {
       if ($(this).is(":checked")) {
          $("#newsletterInputfield").show();
       } else {
          $("#newsletterInputfield").hide();
       }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter

...

<div id="newsletterInputfield" style="display:none">
    <input type="email" placeholder="Email*" id="email" class="inputFields" />
</div>

或将您的代码更改为此

$("#newsletterInputfield").hide();/**add this*/
$("#newsletterCheckbox").change(function () {
   if ($(this).is(":checked")) {
      $("#newsletterInputfield").show();
   } else {
      $("#newsletterInputfield").hide();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter

...

<div id="newsletterInputfield">
    <input type="email" placeholder="Email*" id="email" class="inputFields" />
</div>

Answer 2

也许它对你的问题的解释，但你所拥有的代码除了我能看到的一件事之外还很好。

根据您的示例，最初您的复选框未选中 - 因此最初应隐藏电子邮件输入。这是我能看到的唯一问题，因为它不是最初隐藏的。

所以我要改变你的包装器dic以显示无风格：

<div id="newsletterInputfield" style="display:none">

而不是这个

<div id="newsletterInputfield">

除此之外你如何引用jQuery以及你网页的其余部分看起来可能是个问题，但我们看不到......

Answer 3

我的解决方案仅使用CSS3和HTML。

不需要Javascript。

这里的想法是使用:checked选择器来设置所需元素的样式。

HTML：

<input type="checkbox" id="foo" value="1" checked="checked"/>
<div id="checked-a">
    Some content
</div>

<input type="email" id="hdn1" value="yes" />

现在的CSS：

#hdn1 {
    display:none;
}

#foo:checked ~ #hdn1 {
    display:inline !important;
}

您可以添加转换以使其看起来更好，但这不是必需的。

点击此处查看示例，其中包含转化，display部分已注释掉：http://jsfiddle.net/d3aokkv7/2/

Answer 4

HTML：

<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter...

<div id="newsletterInputfield" style="display:none;">
    <input type="email" placeholder="Email*" id="email" class="inputFields" />
</div>

JQuery的：

$("#newsletterCheckbox").change(function () {
      $("#newsletterInputfield").toggle();
});

JsFiddle

Answer 5

我不确定我的问题是否正确。

要在开头隐藏字段，请添加此javascript代码：

$("#newsletterCheckbox").change(function () {
   EmailTextboxVisibility();
});

function EmailTextboxVisibility(){
    if ($("#newsletterCheckbox").is(":checked")) {
      $("#newsletterInputfield").show();
   } else {
      $("#newsletterInputfield").hide();
   }
}

$( document ).ready(function() {  
   EmailTextboxVisibility();
});

如果未选中此复选框，则会在开头隐藏您的电子邮件文本框。

这是我的jsfiddle

Answer 6

代码很好，只需将所有内容放入document.ready：

**$(document).ready(function() {**
        $("#newsletterCheckbox").change(function () {
            ...
        });
    **});**

谢谢你们的帮助：）

为什么我的输入从未被隐藏？

6 个答案: