单击时javascript复选框没有反应，总是必须按提交

Question

由于某种原因，我已经尝试了几天的脚本无法工作。

我有一些显示不同颜色的复选框。当用户单击一种颜色时，我希望脚本重新加载我网站的其中一个 DIV。

使用<form> 标签和<input type="submit"> 一切正常，基本上只需一个按钮。但它永远不会只通过选中一个复选框来工作，我总是必须点击提交。

任何有关代码的帮助将不胜感激！

谢谢！

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>

表格：

<?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')

根据您的 PHP 回显，似乎是错误的。 regularCheckbox 是一个类，而不是一个 id，所以你需要选择 $(".regularCheckbox:checked')。顺便说一句，您不应该在循环中重复输出相同的 id，id 必须是唯一的。

另外，您可能只想在表单上使用 jQuery 的 serialize() method。