Как кодировать кнопку для перехода на другую веб-страницу и установить флажок

Question

Я работаю над простым html boostrap проектом и мне нужна кнопка (href или button) в моем index.html, которая, когда я нажимаю на нее, отправляет меня на мою страницу contact.html и ставит флажок.Я делаю список продуктов, и когда посетители видят нужный товар и нажимают на него, он может направить их на страницу контактов с уже отмеченным товаром, чтобы заполнить информацию для покупки (отметив флажок).Я очень хорошо разбираюсь в html и css, и у меня нет знаний о js, и я думаю, что это можно сделать с помощью функции, но я не нашел ни одного подобного вопроса для ее реализации.

В моемсобственные плохие знания я пытался направить свою кнопку к contact.html # item1 (где item1 представляет флажок, который я хочу проверить), очевидно, без результатов.

Это часть кода, который у меня есть (яВыньте теги div и img, чтобы упростить код):

<a href="contact.html#item1">I want popcandy!</a>
<a href="contact.html#item2">I want icecandy!</a>
<a href="contact.html#item3">I want spicecandy!</a>

И кнопки в форме страницы contact.html примерно такие (те, которые мне нужно было проверить с помощью вышеупомянутогокнопки):

<input id="item1" type="radio" name="item1" value="item1"/><label >Popcandy</label>
<input id="item2" type="radio" name="item2" value="item2"/><label>icecandy</label>

Если у вас есть решение, пожалуйста, дайте мне знать, я очень благодарен.Извините за мои ошибки в английском редактировании.:)

Answer 1

1. Получить якорный текст:

var href = window.location.href;
var anchor =  href.substring(url.indexOf("#")+1);

2. проверить ввод с текстом привязки:

var item = document.getElementById(anchor)

if (item) {
  item.checked = true
}

Ниже код показывает, как это работает.

var anchor = 'item2'

var item = document.getElementById(anchor)

if (item) {
  item.checked = true
}

<input id="item1" type="radio" name="item1" value="item1"><label for="popcandy">Popcandy</label>
<input id="item2" type="radio" name="item2" value="item2"><label for="icecandy">icecandy</label>

Answer 2

Обработка location.hash на странице contact.html. Как то так.

window.onload = function(){
   if(location.hash){ // hash (#item) exists
     var hash = location.hash.replace('#','');
     var item = document.getElementById(hash);
     if(item){
       item.checked= true;
     }
   }
}

Answer 3

Вы хотели бы добавить строку запроса в свой href для кнопки, а затем проверить эту строку запроса при загрузке целевой страницы.

href=‘contact.html?checkItm=item1’ href=‘contact.html?checkItm=item2’

Затем в ответ на запроссобытие загрузки страницы на странице contact.html, проверьте параметр строки запроса checkItm и используйте JavaScript для проверки соответствующего элемента.

В этом вопросе приведены примеры того, как установить флажок в строке URL-запроса. выбор флажков на основе параметров URL