选中复选框时仅重新加载一个DIV

我一直在尝试让脚本工作，但没有机会！

基本上，我想要一个复选框表单，当一个框被选中时自动提交，然后在我的网站上只重新加载一个特定的DIV（indexMain）。我试图实现的是在左边有一个按颜色过滤的过滤器，所以当用户检查RED时，只有RED项目会显示（通过重新加载items DIV）。

这是我到目前为止的代码（不起作用，因为检查颜色框没有任何效果）：

<script>
$(function() {
      $(".regularCheckbox").change(function() {
      console.log("changed...");
      var data = $(this).serialize();
      console.log(data);
      $("#indexMain").load("index.php?data="+data)
               })
    })
</script>
<div class="bgFilterTitles">
<h1 class="filterTitles">COLOR</h1>
</div><div class="colors">
<form id ="colors" method="post" action="index.php">
<?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 />";
}
?>