How do I use JQuery to hide/display divs associated with an adjacent checkbox?
<p>I'm just getting started with JQuery and am stumped.  I want a series of input checkboxes, that when checked, display/hide the adjacent textboxes.  I've gotten part of the logic but as you can probably tell, checking any one of the checkboxes, hides/displays ALL of the textboxes.  How can I make each checkbox only affect the contents of the div that is directly below it?  I don't want to write a separate function for each checkbox.</p>

<pre><code>&lt;script type="text/javascript"&gt;                                            
$(document).ready(function() {

   $(":checkbox").click(function(){
        if ($(":checkbox").is(":checked")) {
                $(".optionalinfo").show("fast");}
        else {      
                $(".optionalinfo").hide("fast");}
        });
});

 &lt;/script&gt;   

 &lt;/head&gt;                                                                 
 &lt;body&gt;                                                                  

&lt;input id="chk1" type="checkbox"&gt;Hide/Show text1&lt;/input&gt;
&lt;div class="optionalinfo"&gt;
&lt;input id="text1" type="text"&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;br&gt;

&lt;input id="chk2" type="checkbox"&gt;Hide/Show text2&lt;/input&gt;                       
&lt;div class="optionalinfo"&gt;
&lt;input id="text2" type="text"&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;br&gt;

&lt;input id="chk3" type="checkbox"&gt;Hide/Show text3&lt;/input&gt;                       
&lt;div class="optionalinfo"&gt;
&lt;input id="text3" type="text"&gt;&lt;/input&gt;
&lt;/div&gt;
</code></pre>
