title: How to show/hide a specific image based on which checkbox is clicked (clicking cbox3 should open tinypic3)
body: <p>I have 10 different checkboxes, each with their unique ID - in sequential order like: <code>cbox1</code>, <code>cbox2</code>, etc.. Each checkbox has an associated "tinybox" div which contains an image, and each image has an ID also in sequential order, like <code>tinypic1</code>, <code>tinypic2</code>, etc.. I'm trying to write a jQuery script so that when a user clicks on any of the checkboxes, it will then either <code>.show()</code> or <code>.hide()</code> that associated tinypic.</p>
  
  <p>For example, let's say a user clicks on the third checkbox, which has id="cbox3", the script should identify this is cbox THREE and therefore show or hide "tinypic3". Each checkbox has a unique ID, but has the same Class (called cboxes).</p>
  
  <p>This jQuery script successfully uses the class to run when any cbox is clicked, but how do I get it to show/hide the associated TINYPIC instead of show/hiding the cbox itself?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
     $(document).ready(function() {
       $('.cboxes').click(function() {
   if ($(this).prop('checked')) {
             $(this).next().show();  // This should show the associated tinypic with the same number as the cbox that was clicked.
              }   
          else {
              $(this).next().hide();    // This should hide the associated tinypic with the same number as the cbox that was clicked.
          }
       });    
     });       
  &lt;/script&gt;
  </code></pre>
  
  <p>I've tried substituting <code>$(this).next().show();</code> for <code>$("[id^='tinypic']").show();</code>  or <code>$('input:checkbox[id^="tinypic_"]')</code> but it won't work. I'm obviously not understanding the logic somehow.</p>
  
  <p>Any help is huge! Thanks a lot :)</p>
  
  <p><strong>Here's a sample checkbox for cbox2:</strong></p>
  
  <pre><code>&lt;li&gt;
     &lt;input id="cbox2" type="checkbox" name="cbox2" class="cboxes" /&gt;
     &lt;label for="cbox2"&gt;Show&lt;/label&gt;  
     &lt;div class="tinybox"&gt;
        &lt;img src="http://www.example.com/img/temp.jpg" alt="tinypic2" id="tinypic2" style="display:none;"&gt;   
     &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>