Question

122

Show div when radio button selected

rated 0 times [ 126] [ 4] / answers: 1 / hits: 117572 / 11 Years ago, thu, january 16, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

frankiefredyr

Add To Favorites

Follow

Total Points: 555

Total Questions: 108

Total Answers: 94

Location: Egypt

Member since Tue, May 3, 2022

2 Years ago

answered 11 Years ago pierre · Accepted Answer

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();   

       }

   });

});