我正在尝试做一个非常简单的HTML 电子邮件中的复选框 hack https://youtu.be/38pcplCDOng进行一些基本的电子邮件内交互。
像下面这样：
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
每当单击待办事项时，我都可以应用一些样式来标记它
完毕。
但如果我将待办事项设为链接：
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<a href="http://www.google.com" target="_blank">Open Google</a>
</label>
单击链接时不会切换该复选框。
这是一个codepen 来演示 https://codepen.io/nicholasstephan/pen/pGoJBJ.
有什么方法可以打开链接并切换复选框吗？由于这是一封 HTML 电子邮件，因此任何 JavaScript 解决方案都是不可能的。
答案是：没有 JS 就不行。
HTML 设置生成嵌套的交互式内容。事实是，<a>标签接收点击事件并取消标签上的点击。你需要一些 JS！这样，复选框的自然行为就不会改变，即您可以取消单击：
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
<a href="http://www.google.com" onclick="myInput.click()" target="_blank"> Open Google</a>
</label>
工作演示 https://stackblitz.com/edit/js-rafvuw?file=index.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
