Question

I am trying to make a DIV hide/show depending on whether a Checkbox is selected or not.

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).

My javascript should check the ID of each .itemBox items (which is a color) and then hide/show.

So far I have my form and javascript, but nothing happens when I check a Checkbox.

FORM:

div class="colors">
<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>

JAVASCRIPT:

<script>
    $('.colors').delegate('input:checkbox', 'change', function() { 
         if ($(this).attr('checked')) {
            $(".itemBox not(#" + $(this).val()  + ")").hide();
            $(".itemBox #" + $(this).val()).show();
        }
    })
</script>

OUTPUT:

<td><div name='item' id='".$info[color_base1]."' class='itemBox'> .....

Answer 1

Here is how I would do it:

$(":checkbox").bind("click", function (event) {
     if($(this).is(':checked')) {
          $(".itemBox:not(#" + $(this).val()  + ")").hide();
          $(".itemBox[id='" + $(this).val() + "']").show();
     }else {
           //maybe you should do smth if checkbox is unchecked
     }
});

I think your mistake was the space before :not and the second selector should be like $(“.itemBox[name=’value’]”) without space before [.