Задать вопрос
@iwebdesigner

Как передать значения чекбоксов в URL?

Нужно без перезагрузки страницы передать значения чекбоксов в URL, чтобы потом можно было делиться этой ссылкой и нужные чекбоксы сразу же были выбраны.

На просторах нашёл код на jQuery, который работает, но не совсем корректно. Проблема в том, что если перейти на страницу и снять уже отмеченный чекбокс, то из ссылки он почему-то не убирается.

Может кто знает как доработать этот код, или поделитесь ссылкой на более элегантное решение?

Спасибо!

<form>
	<ul>
		<li><input type="checkbox" name='parameter-1[]' value="Value-A"/>Value A</li>
		<li><input type="checkbox" name='parameter-2[]' value="Value-B"/>Value B</li>
	</ul>
</form>


let objectWithCheckboxes={},
withParams=!!location.search,
siteHref=location.href
$('input').change(e=>{
  let el=e.target,
  jq=$(el)
  if(jq.is(':checked')) objectWithCheckboxes[el.value]=el.name
  else delete objectWithCheckboxes[el.value]
  let res=[]
  for(let k in objectWithCheckboxes) res.push(objectWithCheckboxes[k]+'='+k)
  res=res.length?(withParams?'&':'?')+res.join('&'):''
  window.history.replaceState('','',siteHref+res)
  //^ эта строчка заменяет URL в браузере без перезагрузки страницы
  console.log(siteHref+res)
  //^ а это для теста
})


URL выглядит так: www.site.ru/?parameter-1=Value-A
  • Вопрос задан
  • 271 просмотр
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы