user2886091 user2886091 - 4 years ago 481
Javascript Question

Show div when radio button selected

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 Source

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();   
       }
   });
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download