Блог

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

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

Это часть имеющегося у меня кода (я удалил теги divs и 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>
  

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

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

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

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

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

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>  

Процесс 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;
     }
   }
}