Jquery传递复选框的值并加载div

Question

I have a Jquery that takes the value of a checkbox as soon as it has been checked and then should be hiding a DIV and reloading a .php in that same DIV instead.

So far I just get the script to act once the checkbox is ticked and the DIV to hide, but I can´t get the value of the checkbox passed and neither the DIV loaded...

Here is the code:

FORM:

echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";

JQUERY:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(":checkbox").bind("click", function (event) {
        if($(this).is(':checked')) 
            {
            var color = $(".regularCheckbox").find(':checked').val();
            $(".itemMain").hide();
            $(".indexMain").load('indexMain.php?color='+color);
            }
});
});
</script>

indexMain.php

$color = $_GET['color'];
$items = mysql_query("SELECT * FROM item_descr WHERE color_base1 = '$color'");

My intention is to create a good filtering for my content.

Thanks!!!

Answer 1

Just use this. Your current code looks for a checked check-box within .regularCheckbox. .find() is used for finding children elements of those in the matched set.

jQuery(document).ready(function($) {
    $(":checkbox").bind("click", function(event) {
        if ($(this).is(':checked')) {
            var color = $(this).val();
            $(".itemMain").hide();
            $(".indexMain").load('indexMain.php?color=' + color);
        }
    });
});​

Also, for this kind of thing you would be better served to use the jQuery .change event handler (so that you ignore events when the value doesn't actually change):

$("input:checkbox").change(function() {
    // what to do when the value changes
});