JSFiddle - React, Tailwind, and code Playground

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

    console.log('http://localhost/test/javascript.php?' + qs);
});