Question

所以我想让我的用户可以选择在新窗口中打开链接，也可以根据复选框值打开链接。如果选中该值，则在新窗口中打开，如果未在同一个窗口中打开。如果可能的话，我希望不必重新加载页面。

Answer 1

您应该使用target链接属性。

function setLinkTarget(checkbox, selector) {
  var link = document.querySelector(selector);
  if (link) {
    link.target = checkbox.checked ? '_blank' : '_self';
  }
}

<a href="https://google.com" id="my-link">link</a>
<input type="checkbox" onClick="setLinkTarget(this, '#my-link')">

plunker。

Answer 2

JavaScript / Jquery - 这是一种使用jquery来查看复选框是否被选中的方式，具体取决于它有两个不同的锚标记，它们将在新选项卡或同一选项卡中打开。

//Animated Checkbox
//Start by showing the open in same tab link
var b;
b = '<a href="https://www.google.com/" target="_self">Open In Same    Tab</a>'
document.getElementById('samelink').innerHTML = b;

$("#samelink").show();
$("#link").hide(); 


//Check if the checkbox was clicked or checked
$('#check').click(function() {
//If it is create the anchor tag and substitute it into the html
if(document.getElementById('check').checked) {

var c;
c = '<a href="https://www.google.com/" target="_blank">Open In New Tab</a>'
document.getElementById('link').innerHTML = c;

$("#samelink").hide();
$("#link").show();
} else {
//If it hasn't been checked keep the open in same tab link in there
var b;
b = '<a href="https://www.google.com/" target="_self">Open In Same Tab</a>'
document.getElementById('samelink').innerHTML = b;

$("#samelink").show();
$("#link").hide();
}
});

HTML部分

<!-- Create the form -->
<div class="checkbox">
<form>
<label>
<input type="checkbox" name="radio" id="check" class="checkb"><span class="label-text">Open in new window?</span></input>
</label>

</form>

<div class="linked">
<p id="link"></p><!-- if open in new tab is true put the link in this p tag, else put the link in the samelink p tag-->
<p id="samelink"></p>
</div>

</div>

如果选中复选框，请在新窗口中打开链接

2 个答案: