Question

我希望有人可以指出我正确的方向。我主要是一名PHP开发人员，但由于我们收到的AJAX工作请求数量不断增加，我真的试图更好地了解jquery和javascript。

基本上我有一个可以正常使用的侧边栏过滤器。它基于3件事。组，类别和子类别。因此，例如，Boots作为类别，Leather（类型）作为子类别，Black（颜色）作为三级过滤器。目前它的工作基于GET形式。但是，我想使用实时过滤器，以便点击checkbox时，它会根据查询更新结果。我可以为此编写所有PHP，但我很难通过jQuery将数据整合在一起。我看过使用jQuery .each和.change。

共有3组复选框，它们都基于数组。例如，再次：category[]，subcategory[]，tertiary[]。

提前感谢您的帮助。

一些HTML示例

<input id="$ProdCatLabel" class="side_filter_checkbox" name="ProdCatFil[]" type="checkbox" value="$ProdCat">
<input id="$ProdSubCatLabel" class="side_filter_checkbox" name="ProdSubCatFil[]" type="checkbox" value="$ProdSubCat">
<input id="$BrandingLabel" class="side_filter_checkbox" name="BrandFil[]" type="checkbox" value="$Branding">

我的尝试：

var prodcats = $('side_filter_prodcats[name="ProdCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

var prodsubcats = $('side_filter_prodsubcats[name="ProdSubCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

$.ajax({
    type: "POST",
    url: "[ENTER PHP URL HERE]",   
    data: "ProdCats=" + prodcats + "ProdSubCats=" + prodsubcats,                                        
    success: function(msg) { $(".content_area").html(msg); }
});

我在这里咆哮着正确的树吗？

Answer 1

好的，我们说您的复选框包含category，subcategory和tertiary类。您可以将单击事件处理程序附加到调用函数以加载正确数据的每个组，将复选框值和类或数据属性作为参数传递给函数。

// Your main DOM ready function
$(document).ready(function() {

    // Checkboxes click function
    $('input[type="checkbox"]').on('click',function(){
        // Here we check which boxes in the same group have been selected
        // Get the current group from the class
        var group = $(this).attr("class");
        var checked = [];

        // Loop through the checked checkboxes in the same group
        // and add their values to an array
        $('input[type="checkbox"].' + group + ':checked').each(function(){
            checked.push($(this).val());
        });

        refreshData(checked, group);
    });

    function refreshData($values, $group){
        // Your $values variable is the array of checkbox values
        // ie. "boot", "shoe" etc
        // Your $group variable is the checkbox group
        // ie. "category" or "subcategory" etc.
        // Now we can perform an ajax call to post these variable to your php
        // script and display the returned data

        $.post("/path/to/data.php", { cats: $values, type: $group }, function(data){
            // Maybe output the returned data to a div
            $('div#result').html(data);
        });
    }

});

以下是操作中复选框点击功能的示例：http://jsfiddle.net/F29Mv/1/

基于多个复选框数组的JQuery PHP AJAX过滤器

1 个答案: