Why is my input never hidden?

Question

I'd like to show an input (type = email), if the checkbox is checked. If its not checked, I'd like to hide it. My problem is, the input field is always visible.

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>

I've tried This and a plenty of other examples. Thanks in advance.

And where is your own Fiddle? Probably he hasn't looked at his console and has included the JavaScript before the HTML. — GuyT
– GuyT, Commented Oct 3, 2014 at 7:59
I set up a fiddle with your own code and it works fine - I don't see any problems there. — Aleks G
– Aleks G, Commented Oct 3, 2014 at 8:00
Your code appears to work. The element is hidden when checked state is changed to unchecked. Do you mean the fact that it's showing form the beginning? This is because your code only runs at the change event, and no change has happened at page load. If you want it to load hidden, you should preferrably hide it with css. — David Hedlund
– David Hedlund, Commented Oct 3, 2014 at 8:01
@DavidHedlund This is the curious part. I have no idea why my code wont work. It's okay, that it's showing from the beginning. — ArmandoS63
– ArmandoS63, Commented Oct 3, 2014 at 8:06
@minimen: But you can't just point to working code and ask us to tell you why it isn't working. If the code works in your fiddle then the error is in code that you're not showing us. — David Hedlund
– David Hedlund, Commented Oct 3, 2014 at 8:09

Chris Moutray · Accepted Answer · 2014-10-03 08:17:42Z

Perhaps its interpretation of your question but the code you have is fine apart from one thing that I can see.

Based on your example, initially your checkbox is unchecked - so initially the email input should be hidden. And that's the only problem I can see in that it's not initially hidden.

So I'd change your wrapper dic to have a display none style:

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

rather than this

<div id="newsletterInputfield">

Aside from this how you reference jQuery and what the rest of your page looks like could be a problem but we can't see that...

Gildas.Tambo · Accepted Answer · 2014-10-03 08:18:43Z

add this style="display:none" to #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>

or Change your code to this

$("#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>

Ismael Miguel · Accepted Answer · 2014-10-03 08:23:43Z

My solution uses only CSS3 and HTML.

No need for Javascript.

The idea here is to use the :checked selector to style the element you want.

The HTML:

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

Now the CSS:

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

You can add a transition to make it look better, but it's not required.

Check here for an example, with transitions and the display part commented out: http://jsfiddle.net/d3aokkv7/2/

Norrj · Accepted Answer · 2014-10-03 08:26:32Z

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

Edi G. · Accepted Answer · 2014-10-03 08:24:22Z

I'm not sure whether I get your question right.

To hide the field at the begin add this javascript code:

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

This will hide your email textbox at the begin when the checkbox isn't checked.

here my jsfiddle

The OP's linked jsfiddle wasn't his - it was an example of something he looked at - and it worked correctly without any updates.
My question is, why my code does not work when I'm testing it, but here it does work

ArmandoS63 · Accepted Answer · 2014-10-03 08:28:36Z

The code was fine, just needed to put all in document.ready:

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

Thank you guys for your help :)

Collectives™ on Stack Overflow

Why is my input never hidden?

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Related