0

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>

Edited by genzoman: n/a

2
Contributors
3
Replies
7
Views
6 Years
Discussion Span
Last Post by genzoman
0

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

Edited by Airshow: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.