Javascript 选中/单击复选框时，使用从SQL筛选的数据重新加载div

我很难让它发挥作用

我有一些不同颜色的复选框。当用户单击一个复选框时，我希望我的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>

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

---

有什么建议吗？

您可以使用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>

某物
别的
第三件事
绿色
红色
蓝色
$（“输入”）。单击（“单击”，函数（）{
if（$（this.attr（“选中”））{
$（“#items div[name=item]：不是（.“+$（this.val（）+”））.hide（）；
$（“#items div[name=item]。”+$（this.val（））.show（）；
}
});

我遇到了类似的问题，这个jquery代码片段应该会有所帮助。在本例中，使用jquery

val

函数获取url的值。当您单击表单/按钮/etc时，它会触发一个函数，将url加载到您的命名div中

$('#yourclickableobjectID').click( function(){
        $('#yourdivID').load("yoururl.php?yourquerystring=somestuff");
});

---

谢谢，但我需要在mysql数据库中检查项目。基本上，当你点击红色复选框时，我应该运行一个SELECT。。其中color=$color（假设我收到$color中的RED值），如果这是真的，那么很可能是做错了。除非这是某种家庭作业。我正在建立一个服装网站，在那里你应该能够通过颜色进行过滤……当它们输出到屏幕时，每个项目都可以在其类中包含一个属性，这将允许你执行我上面描述的操作。所以我应该将项目的颜色分配给它的类？我相信这变化太大了。。。在您的代码中，所有div都命名为“item”，因此所有div都将显示/隐藏…：s

<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>

$('#yourclickableobjectID').click( function(){
        $('#yourdivID').load("yoururl.php?yourquerystring=somestuff");
});