0

我很难让它发挥作用。

我有一些不同颜色的复选框。当用户单击一个复选框时，我希望我的 indexMain DIV（这是显示所有项目的 DIV）仅显示具有所选颜色的项目。

另外我想避免有一个提交按钮，我希望 DIV 在用户单击其中一个复选框时加载所选项目。

到目前为止，我有这个：

Javascript：

<script>
$(".regularCheckbox").change(function() {
var all_boxes = $('.regularCheckbox');
var checked_boxes = $('.regularCheckbox:checked');
var all_boxes_values = [];

checked_boxes.each(function(){
 var cb_value = $(this).val();
 all_boxes_values.push(cb_value);
});

var all_boxes_values_clean = all_boxes_values.join(", ");
console.log(all_boxes_values_clean);
$.get("index.php", {q: all_boxes_values_clean},
      function(result) {
       $("#indexMain").html(result);
      })
}); 
</script>

形式：

<form 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 />";
}
?>
<input type="submit" />
</form>

PHP 在我的 indexMain DIV 中获取结果：

$color = $_GET['color'];

目前我需要按 SUBMIT 来发送数据并重新加载整个 index.php 页面......

有什么建议么？

4

2 回答 2

0

我有一个类似的问题，这个 jquery 片段应该有帮助。在此示例中，使用 jqueryval函数获取 url 的值。当您单击表单/按钮/等时，它会触发一个函数，将 url 加载到您命名的 div 中。

$('#yourclickableobjectID').click( function(){
        $('#yourdivID').load("yoururl.php?yourquerystring=somestuff");
});
于 2012-08-01T21:08:52.133 回答
0

您可以使用 jQuery 来做到这一点 - 使用类并隐藏任何不属于该类的项目。

<div id="items">
    <div name="item" class="blue">Something</div>
    <div name="item" class="red">Something else</div>
    <div name="item" class="green">Third thing</div>
</div>

<input type="checkbox" value="green" /> green
<input type="checkbox" value="red" /> red
<input type="checkbox" value="blue" /> blue

<script language="javascript" type="text/javascript">
    $("input").on("click", function() { 
        if ($(this).attr("checked")) {
            $("#items div[name=item]:not(." + $(this).val()  + ")").hide();
            $("#items div[name=item]." + $(this).val()).show();
        }
    });
</script>
于 2012-08-01T21:01:02.507 回答