jquery - Checkbox Selected Values Get in Browser URL using Javascript - Stack Overflow

admin管理员组

文章数量:1320661

I need check box selected values get in browser url to execute query as per selection base.

html code

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

When User Click on price option or color option, URL should change like this

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

If user selected only single check box then should display only one parameter in url.

Is it possible with javascript ?

I need check box selected values get in browser url to execute query as per selection base.

html code

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

When User Click on price option or color option, URL should change like this

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

If user selected only single check box then should display only one parameter in url.

Is it possible with javascript ?

• javascript
• jquery

Share Improve this question Follow asked Jul 14, 2015 at 12:06 jack bronejack brone 20511 gold badge55 silver badges2424 bronze badges 1

• You can do this with jQuery.param() – alan0xd7 Commented Jul 14, 2015 at 12:12

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

$('.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

You can use the $.param helper to create a valid querystring from the selected values. Try this:

$('.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

Also note the use of map() to make the array creation simpler.

Try join():

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

You cannot send the same parameter name i.e. price and colors for multiple values. Instead you can use price-1, price-2 etc, please see below code

$('.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./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>

Actually the thing you have mentioned is a bit of tricky and not possible, you need to change the specification little bit

The reason why this is not possible is that you are asking GET request parameter price to have 2 values, So when it will go to server, the server variable will only show the one parameter, Here you need to set it as array parameter. Or you can use CSV(Comma Separated Values) in param values, Based on this selection I can help you out more

This reference will help you aswell -> How to pass an array within a query string?

本文标签： jqueryCheckbox Selected Values Get in Browser URL using JavascriptStack Overflow