Как убирать из url переменную при снятии чекбокса?

Question

[DaBags]

Пример кода:

let objectWithCheckboxes={},
withParams=!!location.search,
siteHref=location.href
$('input').change(e=>{
  let el=e.target,
  jq=$(el)
  if(jq.is(':checked')) objectWithCheckboxes[el.name]=el.value
  else delete objectWithCheckboxes[el.name]
  let res=[]
  for(let k in objectWithCheckboxes) res.push(k+'/'+objectWithCheckboxes[k])
  res=res.length?(withParams?'/':'/')+res.join('/'):''
  window.history.replaceState('','',siteHref+res)
})

HTML:

<input type="checkbox" class="checkbox" value="1" name="value1">
<input type="checkbox" class="checkbox" value="1" name="value2">
<input type="checkbox" class="checkbox" value="1" name="value3">
<input type="button" value="Применить фильтр" onClick="location.reload()" />

Суть проблемы:
При нажатии на чекбоксы в адресную строку подставляются нужные переменные со значением 1, нажимаем "Применить фильтр" и все ок (на php реализовано что из url вытягиваются переменные и выбранные чекбоксы остаются отмеченными или лучше это тоже на js сделать?). НО! После перезагрузки страницы, при снятии чекбокса (отправки формы), из адреса не удаляются значения, т.е они начинают повторятся (что не есть нужно): site.ru/value1/1/value2/1/value1/1/value1/1

Вопрос: как исправить ситуацию, чтоб после обновления страницы (когда уже имеется адрес типа site.ru/value1/1/value2/1 и снятия/добавления первого и второго чекбоксов они удалялись и снова добавлялись в адрес, а не повторно добавлялись?

P.S. ещё можете посоветовать дельные/понятные для новичка уроки по js, давно хотел начать учить хотя бы основы.

Comments

[fixeri]

<form class="form" action="#">
		<br>
		<input type="checkbox" class="checkbox" value="1" name="value1">
		<input type="checkbox" class="checkbox" value="1" name="value2">
		<input type="checkbox" class="checkbox" value="1" name="value3">
		<br><input type="submit" value="Отправить">
		<br><input type="button" value="Применить фильтр" onClick="location.reload()" />
	</form>

"use strict";

		let form = document.querySelector(".form");

		let checkboxes = form.querySelectorAll("input[type='checkbox']");

		checkboxes.forEach(el => {
			el.addEventListener("change", () => {
				let newLink = "";
				checkboxes.forEach(item => {
					if(item.checked === true) newLink += `${item.name}/1/`
				});
				form.setAttribute("action", `www.site.ru/${newLink}`);
			});
		});

[DaBags]

fixeri, то что нужно, спасибо вам.

[fixeri]

DaBags, пожалуйста)