<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>
I have these checkboxes and what im doing is i want to save the states of the checkboxes on page reload. I have these additional codes for
selecting only one checkbox
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;
})
}
and for reloading the current page and adding parameters on the url
function onChange(element) {
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('value', element.value);
window.location.search = urlParams;
}