Using jQuery, hide a textbox if a radio button is selected

Question

I have 2 radio buttons, what I want is if a user selects the top radio button then hide a textbox.

Not sure how to bind an event to a radio button.

Answer 1

Something like this:

<input type="radio" name="foo" value="top" />
<input type="radio" name="foo" value="bottom" />

And in jQuery:

$('input[name=foo]').click(function() {
    if($(this).val() == "top") {
        $('#textbox').hide();
    } else {
        $('#textbox').show();
    }
});

click because change doesn't seem to work correctly on IE.

Answer 2

This will allow you to add the event to a selected radio, in case your radio's do not have the same name.

$('checkbox-selector').click(function() {
    if ($(this).is(':checked')) {
      $('textbox-selector').hide();
    }
    else {
      $('textbox-selector').show();
    }
});