JSFiddle - React, Tailwind, and code Playground

by Naresh

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

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