<div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" value="all" name="check" class="form-check-input"> All </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="pending" class="form-check-input"> Pending </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="confirmed" class="form-check-input"> Confirmed </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="received" class="form-check-input"> Received </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="returned" class="form-check-input"> Returned </label> </div>

Tengo estas casillas de verificación y lo que estoy haciendo es guardar los estados de las casillas de verificación en la recarga de la página. Tengo estos códigos adicionales para

seleccionando solo una casilla de verificación

 function checkAll(checkbox) { var checkboxes = document.getElementsByName('check'); var checkeditem = document.querySelector('.form-check-input:checked').value; checkboxes.forEach((item) => { if (item !== checkbox) item.checked = false; }) }

y para recargar la página actual y agregar parámetros en la url

 function onChange(element) { const urlParams = new URLSearchParams(window.location.search); urlParams.set("value", element.value); window.location.search = urlParams; }