Question

我正在研究一个简单的html boostrap项目，并且在index.html上需要一个按钮（href或按钮），当我单击它时，它会将我发送到我的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>

如果您有任何解决方案，请告诉我，我非常感谢。对不起，我的英语编辑错误。：）

Answer 1

您希望将查询字符串添加到按钮的href中，然后在目标页面加载时检查该查询字符串。

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

然后，响应contact.html页面上的页面加载事件，检查查询字符串参数checkItm并使用JavaScript检查适当的项目。

请参阅此问题，以获取有关如何从url查询字符串中选中复选框的示例。 selecting checkboxes based on url parameters

Answer 2

获取锚文本：

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

检查带有锚文本的输入：

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 3

在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;
     }
   }
}

如何编码按钮以定向到另一个网页并选中一个复选框

3 个答案: