[Malleys]

при изменении состояния в любом инпуте... выведет в консоль аналогичный приведённому в условии url с актуальными значениями фильтров

addEventListener("input", ({ target }) => {
	if(!target.matches("form [name]")) return;

	const url = `${new URLSearchParams(new FormData(target.form))}`;

	console.log(url);
});

инпуте, кроме "распродажа"

тогда ему не нужен атрибут name

при загрузке страницы разберёт значения фильтров из url и расставит их по соответствующим полям

const search = new URLSearchParams(location.search);

for(const [key, value] of search) {
	const e = document.querySelector("form").elements[key];
	if(!e) continue;

	switch(e.constructor) {
		case RadioNodeList:
			for(const node of e) {
				if(node.value === value)
					node.checked = true;
			}
			break;

		case HTMLSelectElement:
			for(const option of e) {
				if(option.value === value)
					option.selected = true;
			}
			break;

		case HTMLInputElement:
			e.value = value;

			if(e.type === "checkbox")
				e.checked = true;
			break;
	}
}

набросать самую элементарную разметку

вместо <P> в данном случае нужно использовать <LABEL>
весь пример целиком

<form>
	<fieldset>
		<legend>Size</legend>
		<label><input type="radio" name="size" value="S">S</label>
		<label><input type="radio" name="size" value="M">M</label>
		<label><input type="radio" name="size" value="L">L</label>
	</fieldset>
	
	<fieldset>
		<legend>Color</legend>
		<label><input type="checkbox" name="color" value="1">1</label>
		<label><input type="checkbox" name="color" value="2">2</label>
		<label><input type="checkbox" name="color" value="3">3</label>
		<label><input type="checkbox" name="color" value="4">4</label>
		<label><input type="checkbox" name="color" value="5">5</label>
	</fieldset>
	
	<fieldset>
		<legend>Manufacturer</legend>
		<select multiple name="manufacturer">
			<option>aaa</option>
			<option>b&amp;c</option>
			<option>ddd</option>
			<option>eee</option>
		</select>
		<label><input type="checkbox" data-name="sale" value="распродажа">Распродажа</label>
	</fieldset>
</form>

<script>
	
// const search = new URLSearchParams(location.search); // на самом деле нужно это, но для теста строка ниже
const search = new URLSearchParams("size=M&color=1&color=2&manufacturer=aaa&manufacturer=eee");

for(const [key, value] of search) {
	const e = document.querySelector("form").elements[key];
	if(!e) continue;

	switch(e.constructor) {
		case RadioNodeList:
			for(const node of e) {
				if(node.value === value)
					node.checked = true;
			}
			break;

		case HTMLSelectElement:
			for(const option of e) {
				if(option.value === value)
					option.selected = true;
			}
			break;

		case HTMLInputElement:
			e.value = value;

			if(e.type === "checkbox")
				e.checked = true;
			break;
	}
}

addEventListener("input", ({ target }) => {
	if(!target.matches("form [name]")) return;

	const url = `${new URLSearchParams(new FormData(target.form))}`;

	console.log(url);
});
	
</script>