在新窗口中打開鏈接剃鬚刀如果選中複選框

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>