新しいウィンドウで開きますかみそりチェックボックスがチェックされている場合

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を使用して、新しいタブまたは同じタブで開く2つの異なるアンカータグがあるかどうかを確認する方法です。

//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>