How to only show input fields if checkbox is checked?

Question

Basically, I want to only show these fields if checkbox is selected, if it becomes unselected, disappear.

<input type="checkbox" name="supplied" value="supplied" class="aboveage2" />

<ul id="date">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

I've tried something like:

$('#supplied').live('change', function(){
     if ( $(this).val() === 'supplied' ) {
         $('.date').show();
     } else {
         $('.date').hide();
     }
 });

Any advice would be greatly appreciated =)

Pointy · Accepted Answer · 2011-02-28 01:13:40Z

17

The "#foo" selector looks for elements whose id value is "foo", not "name". Thus the first thing you need to do is add an "id" attribute to your checkbox.

The second thing to worry about is the fact that, in IE (at least old versions), the "change" event isn't fired until the checkbox element loses focus. It's better to handle "click", and what you want to check is the "checked" attribute of the element.

What I'd write is something like:

$('#supplied').click(function() {
  $('.date')[this.checked ? "show" : "hide"]();
});

answered Feb 28, 2011 at 1:13

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mustafa Over a year ago

$('.date').hide(); Need to add this line before.

Mustafa Over a year ago

Oh, that's my mistake. Actually I had to add this line to hide the field in my code. @Pointy thanks for the reply.

Matthew Flaschen · Accepted Answer · 2013-06-02 04:43:24Z

4

Pointy pointed out that you need to set the id of our checkbox (or use a name selector). You also need to use #date (id) instead of .date (class) (or again change the HTML).

Working demo

edited Jun 2, 2013 at 4:43

answered Feb 28, 2011 at 1:17

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

Comments

kojiro · Accepted Answer · 2011-02-28 01:17:20Z

3

You can do this with pure CSS3, of course:

:checked + #date { display: block; }
#date { display: none; }

The equivalent selectors ought to work just fine in jQuery as well.

answered Feb 28, 2011 at 1:17

kojiro

77.8k20 gold badges151 silver badges217 bronze badges

Comments

Chandu · Accepted Answer · 2011-02-28 01:15:26Z

0

Try this:

$('input[name=supplied]').live('change', function(){
     if ( $(this).is(":checked")) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

answered Feb 28, 2011 at 1:15

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

3 Comments

Latox Over a year ago

I've tried this, upon page load the "date" ul is still showing contents, and it is not changing upon checking or unchecking the supplied checkbox.

Chandu Over a year ago

Try it now..changed the class selector to id selector for date.

Andrew Whitaker Over a year ago

Don't forget quotations around the attribute value. input[name="supplied"]

Rabbid76 · Accepted Answer · 2017-12-19 19:20:31Z

0

Matthews answer works great just that the .live deprecated in jQuery 1.7 use the .on

$('#supplied').on('change', function(){
    if ( $(this).is(':checked') ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

edited Dec 19, 2017 at 19:20

Rabbid76

212k30 gold badges163 silver badges205 bronze badges

answered Dec 19, 2017 at 19:06

Bryan McRee

1

Comments

Rob · Accepted Answer · 2011-02-28 01:13:28Z

-1

Try something like:

$('#supplied').live('change', function(){
     if ( $(this).attr("checked")) {
         $('.date').show();
     } else {
         $('.date').hide();
     }
 });

answered Feb 28, 2011 at 1:13

Rob

10.3k5 gold badges64 silver badges93 bronze badges

Collectives™ on Stack Overflow

How to only show input fields if checkbox is checked?

6 Answers 6

2 Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related