JQuery Radio Button Show Div

Hey guys, what function could I use to say, if this radio button is checked show this 'div'. Thanks in advance.

Solution 1:

HTML

<form id='form-id'>
    <input id='watch-me' name='test' type='radio' /> Show Div<br />
    <input name='test' type='radio' /><br />
    <input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>

jQuery

$('#form-id').change(function() {
    if ($('#watch-me').attr('checked')) {
        $('#show-me').show();
    } else {
        $('#show-me').hide();
    }
});

You can see it in action here: http://jsfiddle.net/wmKGd/

UPDATE 25.01.2013
After Upgrading from jQuery Library 1.8.x to 1.9.x
Please use instead of
jQuery Library 1.8.x

jQuery('#some-id').attr('checked') 

jQuery Library 1.9.x

jQuery('#some-id').prop('checked')

You can see it with updated script in action here: http://jsfiddle.net/9XXRY/

Solution 2:

I liked @tinifni's jsfiddle. Here's one with 3 divs that show or hide depending on the radio.

http://jsfiddle.net/dbwest/wmKGd/572/

$('#form-id').change(function() {
    if ($('#watch-me').attr('checked')) {
        $('#show-me').show();
    } else {
        $('#show-me').hide();
    }
    if ($('#watch-me2').attr('checked')) {
        $('#show-me2').show();
    } else {
        $('#show-me2').hide();
    }
    if ($('#watch-me3').attr('checked')) {
        $('#show-me3').show();
    } else {
        $('#show-me3').hide();
    }
});

Solution 3:

$("myradiobuttonselector").change(function () {
  if ($(this).attr("checked")) {
    $("mydivSelector").show();
  }
  else {
   $("mydivSelector").hide();
  }
});

Solution 4:

This is what I use. Replace “mydiv” with the id of your radio button and “content1” with the content you want to show/hide.

Post some html if you need further help.

$(document).ready(function(){
   $('#content1').hide();

   $('a').click(function(){
      $('#content1').show('slow');
   });

   $(‘#mydiv’).click(function(){
      $('#content1').hide('slow');
   })
});

Rick