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

<formid='form-id'><inputid='watch-me'name='test'type='radio' /> Show Div<br /><inputname='test'type='radio' /><br /><inputname='test'type='radio' /></form><divid='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