Show textarea if radio button selected

I want to show a text box if a radio button is selected.  I have the following radio buttons:

<input type="radio" name="resolved" id="Yes" value="Y" />
<input type="radio" name="resolved" id="No" value="N" />

And the following code which is not working:

<script type="text/javascript">
<!--
$('input[name=resolved]').change(function() {
if($(this).val() == "Y") {
$('#resolution').show();
} else {
 $('#resolution').hide();    
 }
 });
 //-->
</script>

Any help appreciated!
peterbrowneAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
with jquery :

      $(document).ready(function() {
            $("#ta").hide();
            $("input[type='radio'][name='resolved']").click(function() {
...

Open in new window


with style :)  

<textarea id="ta" cols="20" rows="5" style="display:none"></textarea>

Open in new window

0
 
leakim971PluritechnicianCommented:
using :

		$("input[type='radio'][name='resolved']").click(function() {
			if( $(this).attr("value") == "N" ) {
				$("#ta").show();
			}
			else {
				$("#ta").hide();
			}
		});

Open in new window


test page :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Enable - Hide Disable Based on radio Selection</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("input[type='radio'][name='resolved']").click(function() {
			if( $(this).attr("value") == "N" ) {
				$("#ta").show();
			}
			else {
				$("#ta").hide();
			}
		});
	});
</script>
</head>
<body>
<input type="radio" name="resolved" id="Yes" value="Y" />Yes<br />
<input type="radio" name="resolved" id="No" value="N" checked />No<br />
<textarea id="ta" cols="20" rows="5"></textarea>
</body>
</html>

Open in new window

0
 
peterbrowneAuthor Commented:
Thanks, how do I have the text area hidden by default.  I've changed your code as follows:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
            $("input[type='radio'][name='resolved']").click(function() {
                  if( $(this).attr("value") == "Y" ) {
                        $("#resolution").show();
                  }
                  else {
                        $("#resolution").hide();
                  }
            });
      });
</script>
0
 
peterbrowneAuthor Commented:
Well that was easy...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
            $("#resolution").hide();
            $("input[type='radio'][name='resolved']").click(function() {
                  if( $(this).attr("value") == "Y" ) {
                        $("#resolution").show();
                  }
                  else {
                        $("#resolution").hide();
                  }
            });
      });
</script>
0
 
peterbrowneAuthor Commented:
Many thanks!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.