[jQuery] toggle a div based on clicking a specific radio button
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16414" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV dir=ltr align=left><SPAN class=655351318-21032007><FONT face=Arial
color=#0000ff size=2>That makes sense Josh...I'll give that a
go.</FONT></SPAN></DIV><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <B>On Behalf Of </B>Josh
Nathanson<BR><B>Sent:</B> Wednesday, March 21, 2007 12:41 PM<BR><B>To:</B>
jQuery Discussion.<BR><B>Subject:</B> Re: [jQuery] toggle a div based on
clicking a specific radio button<BR></FONT><BR></DIV>
<DIV></DIV>
<DIV><FONT face=Arial size=2>Hi Andy,</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>My approach with radio buttons:</FONT></DIV>
<DIV><FONT face=Arial size=2>- Bind a click function to the group</FONT></DIV>
<DIV><FONT face=Arial size=2>- when clicked, check the value - if it's the one
you want, show - otherwise, hide</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>$("input[@name=domainlist]").click(function()
{</FONT></DIV>
<DIV><FONT face=Arial size=2>if(this.value == 'm') {</FONT></DIV>
<DIV><FONT face=Arial size=2>
$('#manual').show("fast");</FONT></DIV>
<DIV><FONT face=Arial size=2>}<BR>else {</FONT></DIV>
<DIV><FONT face=Arial size=2> $('#manual').hide("fast");</FONT><BR><FONT
face=Arial size=2>}</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2>-- Josh</FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2> </FONT></DIV>
<BLOCKQUOTE
style="PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px">
<DIV style="FONT: 10pt arial">----- Original Message ----- </DIV>
<DIV
style="BACKGROUND: #e4e4e4; FONT: 10pt arial; font-color: black"><B>From:</B>
<A title=amatthews@dealerskins.com
href="mailto:amatthews@dealerskins.com">Andy Matthews</A> </DIV>
<DIV style="FONT: 10pt arial"><B>To:</B> <A title=discuss@jquery.com
href="mailto:discuss@jquery.com">[jQuery]</A> </DIV>
<DIV style="FONT: 10pt arial"><B>Sent:</B> Wednesday, March 21, 2007 9:57
AM</DIV>
<DIV style="FONT: 10pt arial"><B>Subject:</B> [jQuery] toggle a div based on
clicking a specific radio button</DIV>
<DIV><BR></DIV>
<DIV><FONT face=Arial size=2><SPAN class=419234116-21032007>I have three radio
buttons, each with an id ("p", "s", "m") and a group name of
"domainlist"</SPAN></FONT><FONT face=Arial size=2><SPAN
class=419234116-21032007>. </SPAN></FONT><FONT face=Arial size=2><SPAN
class=419234116-21032007>I also have a div with an id ("manual") which
contains a textarea box. I'm styling the div to be hidden by default. What I'd
like is that when someone clicks the "m" radio button, I'd like to
display the manual div but if they click any other radio button, I
want to hide it (if it's not already hidden).</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=419234116-21032007></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=419234116-21032007>I know how to
access any of the form fields using their ID, but I can never remember how to
interact with radio buttons or checkboxes. This is what I've got so
far:</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=419234116-21032007></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=419234116-21032007>// it's the third
radio button that is "m"</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=419234116-21032007>$(input[@name=domainlist]')get[2].toggle(function(){<BR> $('#manual').slideDown("fast");<BR>},function(){<BR> $('#manual').slideUp("fast");<BR>});</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=419234116-21032007></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=419234116-21032007>Here's the
code:</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN class=419234116-21032007><input
type="radio" name="domainlist" value="p" id="p"> <label
for="domainlist_p">Run primaries</label><br /><BR><input
type="radio" name="domainlist" value="s" id="s"> <label
for="domainlist_s">Run secondaries</label><br /><BR><input
type="radio" name="domainlist" value="m" id="m"> <label
for="domainlist_m">Run these</label><br /><BR><div
id="manual"><BR> <textarea name="manual" rows="6"
cols="35"></textarea><BR></div></SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV align=left><SPAN style="FONT-SIZE: 14px"><B><FONT face="Century Gothic">
<DIV align=left><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007><FONT face=Arial
size=2>____________________________________</FONT></SPAN></FONT></SPAN></DIV>
<DIV><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007></SPAN></FONT></SPAN> </DIV>Andy
Matthews<BR></FONT></B></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><SPAN
style="FONT-SIZE: 8.5pt; FONT-FAMILY: 'Century Gothic'; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-no-proof: yes">Senior
Coldfusion Developer</SPAN><BR></FONT></SPAN><SPAN
style="FONT-SIZE: 11px"><FONT face="Century Gothic"><FONT color=#808080><IMG
alt="" hspace=0 src="cid:655351318@21032007-0C7D" border=0><BR></FONT>Office:
877.707.5467 x747<BR>Direct: 615.627.9747<BR>Fax:
615.467.6249</FONT></SPAN></DIV>
<DIV><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic">amatthews@dealerskins.com<BR><A
href="http://www.dealerskins.com/">www.dealerskins.com</A></FONT></SPAN></DIV>
<DIV> </DIV>
<P>
<HR>
<P></P>_______________________________________________<BR>jQuery mailing
list<BR>discuss@jquery.com<BR>http://jquery.com/discuss/<BR></BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/