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

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