Skip to main content

¿Cómo capturar el valor de uno o más input checkbox y concatenarlos en una dirección url con Javascript o JQuery?

Estoy intentando hacer un filtro en el que el usuario pueda filtrar los productos por más de un parámetro si así lo quisiera, por ejemplo: si escoge filtrar por categorías la url quedaría así: http://localhost/tienda-poo/categoria/ver**&id=1** (lo que esta en negrilla es lo que debería concatenar).

Si el usuro filtra por categorías y tallas la url debería ser así: http://localhost/tienda-poo/categoria/ver**&id=1&id_talla=2**.

Los valores de los checkbox seleccionados deberían ser enviados a la url cuando el usuario haga click en el botón de filtrar.

<div class="filter-menu">
<form>
    <div class="form-wrapper small">
        <div class="input-wrapper">
            <button class="navbar-button form-label" type="button" id="product-btn">TIPO DE PRODUCTO <span class="form-span"><i class="fas fa-caret-down"></span></i></button>

            <?php $categorias = Utils::showCategorias(); ?>
            <div class="product-wrapper" id="product-category">
                <?php while($cat = $categorias->fetch_object()): ?> 
                    <label class="label-wrapper" for="<?=$cat->id?>"><?=$cat->nombre?>
                        <input type="checkbox" name="<?=$cat->id?>" id="<?=$cat->id?>" value="<?=$cat->id?>">
                        <span class="checkmark"></span>
                    </label>
                <?php endwhile; ?> 
            </div>
        </div>

        <div class="input-wrapper">
            <button class="navbar-button form-label" type="button" id="size-btn">TALLA <span class="form-span"><i class="fas fa-caret-down"></span></i></button>

            <?php $tallas = UtilsTallas::showTallas(); ?>
            <div class="zise-wrapper" id="zise-category">
                <?php while($talla = $tallas->fetch_object()): ?> 
                    <label class="label-wrapper" for="<?=$talla->id?>"><?=$talla->nombre?>
                        <input type="checkbox" name="<?=$talla->id?>" id="<?=$talla->id?>" value="<?=$talla->id?>">
                        <span class="checkmark"></span>
                    </label>
                <?php endwhile; ?> 
            </div>
        </div>

        <div class="submit-wrapper"><button class="filter-submit" onclick="productsFilters()">Filtrar</button>
        </div>  
    </div>
</form>
jmz
  • 81
  • 7