How to toggle a checkbox when a link is clicked? - html

Question

I'm trying to do a pretty simple checkbox hack in an HTML email to make some basic in-email interactivity.
Something like the following:
<style>
input:checked + div {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
<div>A todo item</div>
</label>
Whenever the todo item is clicked, I can apply some styling marking it
done.
But if I make the todo item a link:
<style>
input:checked + a {
text-decoration: line-through;
}
</style>
<label>
<input type="checkbox" style="display:none"/>
Open Google
</label>
The checkbox isn't toggled when the link is clicked.
Here's a codepen to demonstrate.
Is there any way to get the link to open, and the checkbox to toggle? As this is destined for an HTML email, any javascript solution is off the table.

Answer 1

The answer is: you cannot without JS.
That HTML setup makes nested interactive contents. The fact is that the <a> tag receives the click event and that cancels the click on the label. You need some JS! This way the natural behaviour of the checkbox is not altered, i.e. you can un-click:
<style>
input:checked+a {
text-decoration: line-through;
}
</style>
<label for="myInput">
<input id="myInput" type="checkbox" style="display:none"/>
Open Google
</label>
Working Demo

Answer 2

EDIT
As it is for email and you cant use JS, just add a tabindex to a tag and a css. Its the closest you can get without using javascript
Working Demo below:
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'/>
Open Google
</label>

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>