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.

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

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 3

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 4

Try this:

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

Answer 5

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 6

Try something like:

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