Блог

Главная - Вопросы по программированию - Как предварительно заполнить флажки на основе параметров URL

Как предварительно заполнить флажки на основе параметров URL

#javascript #html #checkbox

Вопрос:

Я пытаюсь предварительно заполнить флажки на основе параметров URL-адреса. У меня нет опыта работы с javascript, поэтому я не могу заставить другие решения работать на меня.

Рассмотрим следующую настройку:

 <form method='GET'>
  <input type="checkbox" name="a" value="1" id="1"/>
  <input type="checkbox" name="a" value="2" id="2"/>
  <input type="checkbox" name="a" value="3" id="3"/>
  <button type="submit">Apply</button>
</form>

Я хочу, чтобы второй флажок и первый флажок ставились, когда ?a=2amp;a=1 это наблюдается в URL.

Это то, что я пробовал, но код не работает.

 <script>
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('amp;');

for (i in sURLVariables) { 
  let sParameter =sURLVariables[i].split('='); 
  let name=sParameter[0];
  let value=decodeURIComponent(sParameter[1]);
  let id=decodeURIComponent(sParameter[1]);

  let collection = document.getElementById(id)
  for(j in collection){
    if(collection[j].id==id)collection[j].checked=true
  }
}
</script>

Комментарии:

1. 1. if сравнение должно было иметь == . 2. Используйте URLSearchParams . 3. value и id должно быть в кавычках

2. Фиксированные точки 1 и 3, но для точки 2 вы имеете в виду что-то вроде URLSearchParams(window.location.search.substring(1))

3. developer.mozilla.org/en-US/docs/Web/API/URLSearchParams . Вам не нужно вручную разделять и проверять

4. в html-коде id и value будет в двойных кавычках. и в javascript это сделать так document.getElementById(window.location.href.split("?a=")[1]).checked=true

5. Ммм, это работает для одного параметра, но не работает для нескольких ?a=1amp;a=3 , Возможно, мне следовало бы прояснить это.

Ответ №1:

Вы можете следовать такому подходу

 let fakeQueryString = "a=2amp;a=3"; //replace it with actual url
let searchParms = new URLSearchParams(fakeQueryString);

for(const [key,val] of searchParms)
  document.getElementById(val).checked = true; 
 <form method='GET'>
  <input type="checkbox" name="a" value="1" id="1"/>
  <input type="checkbox" name="a" value="2" id="2"/>
  <input type="checkbox" name="a" value="3" id="3"/>
  <button type="submit">Apply</button>
</form>
Метки: