javascript - 使用Php Javascript在带有参数的URL中显示选中的复选框值

我需要使用参数名称在浏览器URL中获取选中的复选框值。

我的HTML代码：

<div style="width:200px; float:left">
    Price
    <div>
    <input type="checkbox" name="price" value="0-1000" class="filters" />0-1000<br />
    <input type="checkbox" name="price" value="1000-2000" class="filters" />1000-2000<br />
    <input type="checkbox" name="price" value="3000-4000" class="filters" />2000-3000<br />
    </div>
    Colors
    <div>
   <input type="checkbox" name="colors" value="Red" class="filters" />RED<br />
    <input type="checkbox" name="colors" value="Green" class="filters" />GREEN<br />
    <input type="checkbox" name="colors" value="Blue" class="filters" />BLUE<br />
    </div>
    </div>

我的Javascript代码

<script type="text/javascript">
$('.filters').on('change',function(){
    var price = new Array();
        $('input[name=price]:checked').each(function(){
           price.push($(this).val());
        });
    var colors = new Array();
        $('input[name=colors]:checked').each(function(){
           colors.push($(this).val());
        });

    location.href = 'http://localhost/test/javascript.php?price='+price;


});
</script>

选择两种价格和一种颜色后，我需要如下所示的浏览器网址

 http://localhost/test/javascript.php?prices=0-1000,1000-2000&colors=Red

最佳答案

您正在寻找.join()


  join（）方法将数组的元素连接成字符串，然后
  返回字符串。
  
  元素将由指定的分隔符分隔。默认值
  分隔符是逗号（，）。

location.href = 'http://localhost/test/javascript.php?price=' + price.join(',') + '&colors=' + colors.join(',');

即使逗号似乎是默认的分隔符，我还是要确保添加它。

var url = 'http://localhost/test/javascript.php?';
if(price.length) {
    url += '&price=' + price.join(',');
}
if(colors.length){
    url += '&colors=' + colors.join(',');
}
location.href = url; // or url.replace('?&','?');