JavaScript：选中此框时更改href值

我有一个链接到产品页面的按钮，就像这样

<a href="/product.html" id="link"><button>Buy This</button></a>

但它不起作用

---

谢谢！：）

您添加了

jquery

作为标记，如果您正在使用它，请尝试以下操作：

$(function(){
  $("body").on("change", "#option1", function(){
    $("#link").attr("href", "https://www.google.com");
  });
})

---

当然没用了

getElementById

，而不是

getElementById

——案例很重要

'option1'

，而不是

#option1

-我不知道你从哪里知道

#option1

是对的

您正在将

checked

属性设置为

true

，这意味着复选框将设置为checked

您根本没有事件处理程序，因此此代码在页面加载时只运行一次，在用户切换框时不会更新

链接的href位于其

.href

属性中，而不是其

.value

（它实际上没有

.value

）

在

标记中有一个

。这在技术上是无效的，尽管大多数浏览器的工作方式与您预期的相同。但这并不能保证，您应该在按钮上使用链接或JS事件处理程序

考虑到这一切，我向你介绍

<button id="link">Buy this</button>
<label><input type="checkbox" id="option1" /> Option text</label>

---

这是我在JSFIDLE中制作的一个很好的演示

document.getElementById（“link”）.onclick=function（）{
var link=document.getElementById（“链接”）；
var checkbox=document.getElementById（“按钮”）；
如果（复选框。选中）{
setAttribute（“href”，“#test2”）；
}
返回true；
}


再加一件T恤




















































这是一段很遥远的文字。。。




















































这是一些更遥远的文字。。。

您用jQuery标记了这个问题，为什么不使用jQuery快捷方式来处理document.getElementById？不确定为什么在某些部分会有敌意的语气，但答案是肯定的。

$(function(){
  $("body").on("change", "#option1", function(){
    $("#link").attr("href", "https://www.google.com");
  });
})

<button id="link">Buy this</button>
<label><input type="checkbox" id="option1" /> Option text</label>

document.getElementById("link").onclick = function() {
   var link = document.getElementById("link");
   var checkbox = document.getElementById("button");
   if(checkbox.checked){
      link.setAttribute("href", "#test2");
   }
   return true;
}

<a href="#test1"id="link"><button>Buy This</button></a>
    <br>
    <label><input type="checkbox" name="checkbox" value="true" id="button">Add an extra T-Shirt</label>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="test1">This is some text a long way away...</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="test2">This is some text even farther away...</div>