Question

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

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

我需要在选中框时更改href的值。这就是我到目前为止所拥有的

document.getElementById(#option1).checked = true;
document.getElementById(#link).value = '/product/option1.html';

但它不起作用。

谢谢！：）

Answer 1

当然它不起作用......

getElementById，而非GetElementById - 案件无关紧要！
'option1'，而不是#option1 - 我不知道您认为#option1是对的。
您将<{1}}属性设置为checked，这意味着该复选框将设置为已选中。
您根本没有事件处理程序，因此此代码仅在页面加载时运行一次，并且在用户切换框时不会更新。
链接的href位于其true属性中，而不是.href（它实际上没有.value）
.value标记内有<button>。虽然大多数浏览器都会以您期望的方式运行，但在技术上并不合适。这不是一个保证，你应该在按钮上使用链接或JS事件处理程序。

考虑到所有这些，我向你呈现......

<a>

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

Answer 2

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

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

Answer 3

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

www.jsfiddle.net/Lvu5818f

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>

Answer 4

document.GetElementById('#link').href= '/product/option1.html';

JavaScript：选中框时更改href值

4 个答案: