带有复选框的 Html 按钮答案

【问题标题】：Html button with checkbox带有复选框的 Html 按钮
【发布时间】：2015-10-16 13:50:23
【问题描述】：

我正在尝试使用自定义 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 版本。有什么简单的方法可以做到这一点？

感谢您的帮助。

【问题讨论】：

HTML 是静态的还是动态的？

标签： html button checkbox

【解决方案1】：

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 上玩。

【讨论】：

非常漂亮，谢谢先生。它工作得很好，只需要弄清楚如何将其格式化为我的 css 样式。

【解决方案2】：

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

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

【讨论】：

这看起来可行，但我的页面非常混乱，因为它是一种学习体验，我不知道如何将它放入有问题的区域，但是，谢谢！复选框对我来说还是很新的……还有很多其他的。