Question

<script>
$('input[type="checkbox"]').on('change', function(e){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var data = {},
        fdata = [],
        loc = $('<a>', {href:window.location})[0];

    $('input[tpye="checkbox"]').each(function(i){
        if(this.checked){
            if(!data.hasOwnProperty(this.name)){
                data[this.name] = [];
            }
            data[this.name].push(this.value);
        }
    });

    $.each(data, function(k, v){
        fdata[k] = [v.join(',')];
    });

    fdata = fdata.join('&');
    $.post('/wines/all-wines/', fdata);
    console.log(fdata);

    if(history.pushState){
        history.pushState(null, null, loc.pathname+'?'+fdata);
    }
});

 <div class="panel-body">
            <div class="rowElem">
                <input type="checkbox" name="country" value="1" id="">
                <label>Color #1</label>
            </div>
            <div class="rowElem">
                <input type="checkbox" name="country" value="2" id="">
                <label>Color #2</label>
            </div>
            <div class="rowElem">
                <input type="checkbox" name="country" value="3" id="">
                <label>Color #3</label>
            </div>
        </div>

我正在使用laravel，这就是我传递X-CSRF令牌的原因。我想要实现的是当用户点击一个或多个复选框时，它会自动将URL更改为以下内容：link.com/products/all-products?country=1,2,3,4,5

但点击复选框后，它只会将网址更改为：link.com/products/all-products？这主要是它。代码中可能有什么问题？非常感谢你！

Answer 1

除了nbkHope指出你需要以下内容：

$.each(data, function(k, v){
    fdata[k] = [v.join(',')];
});

var countryArr = fdata["country"];
fdata = countryArr.join('&');

您的数组如下所示：{country：Array（）}，因此您需要从fdata中获取国家/地区，然后调用join。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Ajax复选框未在支票

1 个答案: