title: Jquery to show/hide a DIV depending on its ID, using Checkbox
body: <p>I am trying to make a DIV hide/show depending on whether a Checkbox is selected or not.</p>
  
  <p>Multiple items are displayed in my site, each under a DIV called .itemBox. Some colors are shown in Checkbox and I would like to hide all items besides those of the color the user picks (depending on the chosen Checkbox).</p>
  
  <p>My javascript should check the ID of each .itemBox items (which is a color) and then hide/show. </p>
  
  <p>So far I have my form and javascript, but nothing happens when I check a Checkbox.</p>
  
  <p>FORM:</p>
  
  <pre><code>div class="colors"&gt;
  &lt;?php
  $colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
  while ($colorBoxes = mysql_fetch_array($colors))
  {
  echo "&lt;input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /&gt;&lt;font class='similarItemsText'&gt;   ".$colorBoxes[color_base1]."&lt;/font&gt;&lt;br /&gt;";
  }
  ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>&lt;script&gt;
      $('.colors').delegate('input:checkbox', 'change', function() { 
           if ($(this).attr('checked')) {
              $(".itemBox not(#" + $(this).val()  + ")").hide();
              $(".itemBox #" + $(this).val()).show();
          }
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>OUTPUT:</p>
  
  <pre><code>&lt;td&gt;&lt;div name='item' id='".$info[color_base1]."' class='itemBox'&gt; .....
  </code></pre>