Toggle visibility of text box based on status of checkbox

[genzoman]

Hi, all. This is using jquery by the way. I have a list of ethnicities on a form for a person to enter that are checkboxes. One option is 'Other, specify'. When 'other specify' is checked, I would like a text box to pop up and disable the other boxes (if you pick other, you can't pick from the previous ethnicities). If 'other, specify' is unchecked, I would like for the text box to dissappear and re-enable the checkboxes. I had the appearing box working just using JS. I can't seem to get the syntax right to use the toggle feature of jquery to make the box dissappear when unclicked. thanks in advance, you guys are great!

JQUERY

<script type="text/javascript">
      $(function(){
        
	$('#other').click(function()
	{

$('#otherrace').toggle(
          function(event) {
            $(event.target).css('visible');
          },
          function(event) {
            $(event.target).css('hidden');
          }
        );
      });
    </script>

HTML
<input type="checkbox" name="race" value="asian" />Asian<br />
<input type="checkbox" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="checkbox" name="race" value="noanswer" />Choose not to answer<br />
<input type="checkbox" name="race"  id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>

[genzoman]

any ideas to help? can't figure her out! :/

[Airshow]

Genzoman,

Toggle acts on the css "display" property, not "visibility".

As the categories are mutually exclusive, radio buttons are more appropriate than checkboxes. This also allows for much simpler javascript as radio buttons are self managing (no need to disable/enable).

In addition, move style="visibility:hidden;" from the div tag to the "otherrace" input tag.

<input type="radio" name="race" value="asian" />Asian<br />
<input type="radio" name="race" value="hawaii" />Native Hawaiian or other Pacific Islander<br />
<input type="radio" name="race" value="noanswer" />Choose not to answer<br />
<input type="radio" name="race" value="other" id="other" />Other, specify<br />
<div id="race"><input style="visibility:hidden;" type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>

Now, the javascript (jQuery) is very simple:

$(document).ready(function() {
	$('[name*="race"]').click(function() {
		$('#otherrace').css('visibility', $('#other').attr('checked') ? 'visible':'hidden');
	});
});

If you choose to show/hide with css "display" instead of "visibility", then use this instead:

$(document).ready(function() {
	$('[name*="race"]').click(function() {
		$('#otherrace2').toggle($('#other').attr('checked'));
	});
});

Airshow

[genzoman]

works great, thanks so much!