Reset url parameter after check another checkbox

Question

I have a form with 2 checkbox, when I click in some option send "t" and value parameter to my url this is OK, but in second checkbox click, my URL keep with first "t" param eg ?t=man&t=woman, but I would like keep only last click eg: ?t=man

This is a best way to send or should I use Javascript?

My inputs

<input class="form-check-input" type="checkbox" id="t-checkbox" value="man" name="t" onclick="$('.SideFacetContent').submit()" <?= ($param['t'] == 'man' ? 'checked' : ''); ?>>
<input class="form-check-input" type="checkbox" id="t-checkbox" value="woman" name="t" onclick="$('.SideFacetContent').submit()" <?= ($param['t'] == 'woman' ? 'checked' : ''); ?>>

Answer 1

You might consider radio buttons:

Only one radio button in a given group can be selected at the same time.

Also, IDs must be unique to the DOM tree (not repeated):

id="t-checkbox"

Here's a demonstration:

$('.form-check-input').on('click', function() {
  // output serialized form data to console
  console.log($(this.form).serialize());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get">
  <input class="form-check-input" type="radio" name="t" value="man">
  <input class="form-check-input" type="radio" name="t" value="woman">
</form>

Or without jQuery:

var inputs = document.getElementsByClassName('form-check-input')

Array.from(inputs).forEach((input) => {
  // add click handler to each input
  input.addEventListener('click', function() {
    // output serialized form data to console
    console.log(new URLSearchParams(new FormData(this.form)).toString());
  });
});

<form method="get">
  <input class="form-check-input" type="radio" name="t" value="man">
  <input class="form-check-input" type="radio" name="t" value="woman">
</form>