Question

我需要在浏览器网址中选中复选框以根据选择基础执行查询。

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>

当用户点击价格选项或颜色选项时，URL应该像这样更改

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

如果用户只选中了一个复选框，那么只应在网址中显示一个参数。

用javascript可以吗？

Answer 1

您可以使用$.param帮助程序从所选值创建有效的查询字符串。试试这个：

$('.filters').on('change', function () {
    var prices = $('input[name=price]:checked').map(function () {
        return this.value;
    }).get();
    var colors = $('input[name=colors]:checked').map(function () {
        return this.value;
    }).get();

    var qs = $.param({
        price: prices,
        colors: colors
    }, true);

    window.location.assign('http://localhost/test/javascript.php?' + qs);
});

Example fiddle

还要注意使用map()来简化数组创建。

Answer 2

$('.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());
        });
var paramsArray = []
    var pricesParams = createParamList(price,'price');
    var colorsParams = createParamList(colors,'colors');
    if (pricesParams)
    {
        paramsArray.push(pricesParams);
    }
    if (colorsParams)
    {
         paramsArray.push(colorsParams);
    }
    alert('http://localhost/test/javascript.php?'+paramsArray.join('&'));
});         

function createParamList(arrayObj, prefix)
{
    var result = arrayObj.map(function(obj){return prefix+'='+obj;}).join('&');
    return result;

}

JSFiddle

Answer 3

您无法为多个值发送相同的参数名称，例如price和colors。相反，您可以使用price-1，price-2等，请参阅下面的代码

$('.filters').on('change',function(){
    var price = '';
        $('input[name=price]:checked').each(function(index){
           price = price + 'price-'+index+'='+$(this).val()+'&';
        });
    var colors = '';
        $('input[name=colors]:checked').each(function(index){
           colors = colors + 'colors-'+index+'='+$(this).val()+'&';
        });
    
    var url = 'http://localhost/test/javascript.php?'+price+colors;
        url = url.substring(0,url.length-2);

      location.href = url;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 4

尝试join()：

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

Answer 5

实际上你提到的事情有点棘手而且不可能，你需要稍微改变规范

这是不可能的原因是你要求GET请求参数价格有2个值，所以当它转到服务器时，服务器变量只显示一个参数，在这里你需要将它设置为数组参数。或者您可以在参数值中使用CSV（逗号分隔值），根据此选择，我可以帮助您更多

此参考资料将帮助您 - > How to pass an array within a query string?

复选框选定值使用Javascript获取浏览器URL

5 个答案: