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

Answer 1

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

Answer 2

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

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

Answer 4

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

Answer 5

Try this:

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

Answer 6

Try something like:

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