Question

我正在尝试做一个非常简单的checkbox hack in an HTML email来进行一些基本的电子邮件交互。

类似以下内容：

<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 to demonstrate。

有什么方法可以打开链接，以及可以切换复选框吗？由于这是发给HTML电子邮件的，所以任何javascript解决方案都不在话下。

Answer 1

编辑

就像用于电子邮件一样，您不能使用JS，只需在tabindex标签上添加a和css。它是无需使用javascript即可获得的最接近的

下面的工作演示：

label {
  display: block;
  padding: 10px 0;
}
input:checked + div{
  text-decoration: line-through;
}

a:focus{
text-decoration: line-through;outline:0;}

<label>
  <input type="checkbox" style="display:none"/>
  <div>Todo Item</div>
</label>
<label>
  <input type="checkbox" style="display:none"/>
  <div>Another todo Item</div>
</label>
<label>
  <input type="checkbox" style="display:none" id='btnControl'/>
  <a href="http://www.google.com" target="_blank" id='link' tabindex="0">Open Google</a>
</label>

Answer 2

答案是：您不能没有JS。 HTML设置使嵌套的交互式内容成为可能。事实是<a>标签接收到click事件，并取消了对标签的单击。您需要一些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>

Working Demo

Answer 3

JS

 function myFunction() {
  document.getElementById("me").style.textDecoration = "line-through";
 }

HTML

  <label>
  <input type="checkbox" style="display:none"/>
  <a href="http://www.google.com" id="me" onclick="myFunction()" target="_blank">Open 
  Google</a>
  </label>

单击链接时如何切换复选框？

3 个答案: