JavaScript：选中复选框时更改href值

Question

I have a button that links to a product page, like so...

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

And I need to change the value of href when a box is checked. This is what I have so far

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

But it's not working.

Thanks! :)

Answer 1

Of course it's not working...

1. getElementById , not GetElementById - case matters!

2. 'option1' , not #option1 - I don't know where you got the idea that #option1 was right.

3. You are setting the checked property to true , meaning the checkbox will be set to checked.

4. You have no event handler at all, so this code will only run once, when the page loads, and won't update when the user toggles the box.

5. A link's href is in its .href property, not its .value (it doesn't actually have a .value )

6. You have a <button> inside an <a> tag. Not technically valid, although most browsers will work the way you'd expect. This isn't a guarantee though, and you should either use a link, or a JS event handler on the button.

With all that in mind, I present to you...

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

document.getElementById('link').onclick = function() {
    if( document.getElementById('option1').checked) {
        location.href = '/product/option1.html';
    }
    else {
        location.href = '/product.html';
    }
};

Answer 2

You added jquery as a tag, if you're using it, try this:

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

Answer 3

Here is a nice demo I made in 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';