CODEWITHSUNDEEP
javascriptjquery
Latox
Latox

Reputation: 4695

How to only show input fields if checkbox is checked?

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 =)

Upvotes: 8

Views: 40357

Answers (6)

Bryan McRee
Bryan McRee

Reputation: 1

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();
    }
});

Upvotes: 0

Matthew Flaschen
Matthew Flaschen

Reputation: 284816

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

Upvotes: 4

kojiro
kojiro

Reputation: 77117

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.

Upvotes: 3

Chandu
Chandu

Reputation: 82913

Try this:

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

Upvotes: 0

Pointy
Pointy

Reputation: 413737

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"]();
});

Upvotes: 17

Rob
Rob

Reputation: 10248

Try something like:

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

Upvotes: -1

Related Questions