Question

我正在尝试使用自定义CSS按钮创建一个HTML，并添加一个复选框来修改它所链接的链接。我搜索并发现了类似的主题，但似乎无法使用所提供的解决方案。

我承认我真的不知道我在做什么，但如果可以的话我想这样做。

我正在使用 <a class="btn flat" href="http://link1:port#">LinkText</a><a class="btn flat" href="link2.html">Link2Text</a>

example

我想在Link1附近或按钮中添加一个复选框，将其发送到https://Link1:sslPort# 目标是单击将转到普通链接，如果选中该复选框，则会转到SSL版本。有没有简单的方法来做到这一点？

感谢您的帮助。

Answer 1

我希望它可能有所帮助，只是玩弄。

<html>
<head>
<script>
    function ChangeLink(ele){
        if(ele.checked){
            ele.parentNode.setAttribute('href',ele.parentNode.getAttribute('href')+':443');
        }
        else{
           ele.parentNode.setAttribute('href',ele.parentNode.getAttribute('href').substring(0,ele.parentNode.getAttribute('href').length - 4)); //4 Chars of SSL Port + :
        }
    }
</script>    
</head>
<body>
<a href='Link1'>
<span>Link1</span>
<input type='checkbox' onchange='ChangeLink(this)'>
</a>

<br>

<a href='Link2'>
<span>Link2</span>
<input type='checkbox' onchange='ChangeLink(this)'>
</a>

</body>
</html>

Answer 2

JavaScript是内联的。您需要做的就是将link1值替换为您实际需要的值。

<span><a class="btn flat" id="link1"     href="http://link1:port#"><b>LinkText</b> </a> 
<input type="checkbox" onChange=" if (this.checked) {  document.getElementById('link1').href='https://link1:port#';} else { document.getElementById('link1').href='http://link1'; }" />
<a class="btn flat" href="link2.html"><b>Link2Text</b></a></span>

以下是您可以在jsfiddle上播放的工作演示。

带复选框的Html按钮

2 个答案: