How to toggle a checkbox when a link is clicked?

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"/>
  <a href="http://www.google.com" target="_blank">Open Google</a>
</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.

It's because the click on a tag cancels the click on the label tag — Vega, Jan 22 '19 at 02:46
An interactive tag nested within another interactive tag cancels the other's behavior and vice versa. — zer00ne, Jan 22 '19 at 03:10

score 1 · Answer 1 · edited May 14 '19 at 09:20

1

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'/>
  <a href="http://www.google.com" target="_blank" id='link' tabindex="0">Open Google</a>
</label>

edited May 14 '19 at 09:20

Luuklag

3,897
11
38
57

answered Jan 22 '19 at 00:49

Tushar Gupta

15,504
1
29
47

That would work, but as this is an html email I can't use javascript. – nicholas Jan 22 '19 at 00:50
You're right about the CSS selector, I'll change my example to match. – nicholas Jan 22 '19 at 00:51
@nicholas edited, its the closest you can get without using javascript :) – Tushar Gupta Jan 22 '19 at 01:03
1

Using focus is genius, but it's not persistent so won't work in this case. As soon as you click the next link you lose focus and the strikethrough disappears. – nicholas Jan 22 '19 at 01:19

Vega · Answer 2 · 2019-01-22T05:30:35.650

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"/>
  <a href="http://www.google.com" onclick="myInput.click()" target="_blank"> Open Google</a>
</label>

Working Demo

score -1 · Answer 3 · answered Jan 22 '19 at 00:51

-1

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>

answered Jan 22 '19 at 00:51

mdln97

144
1
9

That would work. But as this is for an HTML email, I can't use any javascript. I've updated my question to make this more clear. – nicholas Jan 22 '19 at 00:55

How to toggle a checkbox when a link is clicked?

3 Answers3

Linked