Question

For some reason I can’t get to work a script I have been trying out for a few days.

I have some checkboxes that show different colors. When the user clicks on one color I want the script to reload one of the DIVs of my website.

Everything works fine with the <form> tags and an <input type="submit">, basically with a button. But it never works by just checking a checkbox, I always have to click on submit.

Any help with the code would be much appreciated!

Thanks!

javascript:

<script>
    $('.colors').delegate('input:checkbox', 'change', function() { 
        if ($(this).attr("checked")) {
            var id = $("#regularCheckbox").find(':checked').val();
            $('#itemMain').load('index.php?color='+id);
        }
    }).find('input:checkbox').change();
</script>

form:

<?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' id='checkbox-1-1' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>

Answer 1

$("#regularCheckbox").find(':checked')

seems to be wrong based on your PHP echo. regularCheckbox is a class, not an id, so you will want to select $(".regularCheckbox:checked'). Btw, you should not output the same id repeatedly in a loop, ids need to be unique.

Also, you might just want to use jQuery’s serialize() method on your form.