Show div when radio button selected

Question

I am novice in javascript and jQuery. In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden

so: If radio button #watch-me is checked --> div #show-me is visible. If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.

Here is what I have so far.

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

and JS:

 $(document).ready(function () {  $("#watch-me").click(function() {  $("#show-me:hidden").show('slow');  });  $("#watch-me").click(function(){  if($('watch-me').prop('checked')===false) {     $('#show-me').hide();}     }); }); 

How should I change my script to achieve that?

Answer 1

I would handle it like so:

$(document).ready(function() {    $('input[type="radio"]').click(function() {        if($(this).attr('id') == 'watch-me') {             $('#show-me').show();                   }         else {             $('#show-me').hide();           }    }); });