tag inside tag not triggering checkbox

Question

I have to use <a> inside a <label> tag. Because there are many css styles only apply to <a> in our current system. The <a> tag is not linking to any pages but for styling/hovering.

See code below:

<input type="checkbox" id="my-id">
<label for="my-id"><a href="javascript:void(0)">Some text</a></label>

But when clicking on "Some text", it doesn't toggle the checkbox status.

I've tried $.preventDefault()on the <a> tag but doesn't work.

What should i do to make the <a> behaves like a label?

In the a tag add `onclick="c(this);"` create a new function `function c(obj){ $(obj).parent().prev().prop('checked', true); }` — Thennarasan, Feb 04 '17 at 07:50
@DavidThomas The [HTML5 spec](https://www.w3.org/TR/html5/forms.html#the-label-element) does allow an `` inside a ``. — John Bupit, Feb 04 '17 at 08:00
Any reason for having the `href` attribute in your `a` element? If you remove it, clicking on the text will toggle the checkbox. — GOTO 0, Feb 04 '17 at 08:06
An `` tag is allowed in a label in case of anchoring or actual linking only. If you want it to LOOK like a link, apply the same styles to the label or a `` inside the label. Don't bastardize a link for appearance. — Soviut, Feb 04 '17 at 08:11
@John: I stand corrected! (And slightly appalled, but definitely corrected) Thanks! — David Thomas, Feb 04 '17 at 08:13
Why are you using an `` tag, if you are not using it for a link? — ssc-hrep3, Feb 04 '17 at 08:23
@RyanHu Be aware that when you remove the _href_ it invalidates the element — Asons, Feb 04 '17 at 08:27
@LGSon The `href` attribute is not required on `a` elements. Previous versions of the spec contained an ambiguous formulation, but this [was made clear](https://www.w3.org/TR/html5/links.html#attr-hyperlink-href) in the current draft. — GOTO 0, Feb 04 '17 at 08:36
@GOTO0 Thank you very much ... have missed that completely ... that is a good answer, please post it and you'll have my upvote — Asons, Feb 04 '17 at 08:38
@LGSon One more answer...? :P [Here it is](http://stackoverflow.com/a/42038354/1083663). — GOTO 0, Feb 04 '17 at 08:49
@GOTO0 One more is always welcomed if it is good and not already given :) ... upvoted — Asons, Feb 04 '17 at 08:51

score 5 · Accepted Answer · answered Feb 04 '17 at 08:47

5

If you remove the href attribute from the a element, clicking on the text will toggle the checkbox.

<input type="checkbox" id="my-id">
<label for="my-id"><a>Some text</a></label>

As the HTML spec states:

The href attribute on a and area elements is not required

answered Feb 04 '17 at 08:47

GOTO 0

42,323
22
125
158

1

@BladeMight In fact, the hyperlink is not required in this case. – GOTO 0 Feb 04 '17 at 09:11
Oh that how it is... I was thinking that purpose is hyperlink, am I wrong? – BladeMight Feb 04 '17 at 09:29
@BladeMight Not at all, but it can also be used as a placeholder [(1)](http://stackoverflow.com/a/10510353/1083663), [(2)](http://stackoverflow.com/a/19167175/1083663). – GOTO 0 Feb 04 '17 at 09:44

Asons · Answer 2 · 2017-02-04T08:41:23.317

3

Updated: this answer were given before the edit where made, which now invalidated it, still, I'll leave it for the ones it can be useful

Give the a anchor pointer-events: none

label[for="my-id"] {
  cursor: pointer;
}
label[for="my-id"] a {
  pointer-events: none;
}

<input type="checkbox" id="my-id">
<label for="my-id"><a href="#">Some text</a></label>

If you need to support older browser, use a pseudo element to cover it

label[for="my-id"] {
  cursor: pointer;
  position: relative;
}
label[for="my-id"]::after {
  content:  ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
}

<input type="checkbox" id="my-id">
<label for="my-id"><a href="#">Some text</a></label>

edited Feb 04 '17 at 08:41

answered Feb 04 '17 at 08:01

Asons

84,923
12
110
165

This has very limited browser support. – Soviut Feb 04 '17 at 08:04
1

@Soviut The global support is about 93.58%, you find that limited? – Asons Feb 04 '17 at 08:06
On many browsers, especially mobile browsers, it's only just started being supported. Chrome 53 on Android was the first version. Any older versions will still treat it as a link. Besides, the OP wants the style of a link, not an actual href. – Soviut Feb 04 '17 at 08:09
@Soviut I added an option for all those ... down to IE8 if the single colon is used on the pseudo class ... and the OP said: _I have to use inside a tag._ – Asons Feb 04 '17 at 08:12
@LGSon thank you very much. But it also kills onhover behavior which I need for styling in this case. I missed that in original question, already edited. – Ryan Hu Feb 04 '17 at 08:17

score 3 · Answer 3 · answered Feb 04 '17 at 08:02

Do not use <a> only for styling. Use a class on the label instead.

.my-link-style {
  /* To match the cursor style for an <a> */
  cursor: pointer;
  
  /* Add more styles here */
}

<input type="checkbox" id="my-id" />
<label for="my-id" class="my-link-style">Some text</label>

score 2 · Answer 4 · 2017-02-04T08:30:40.667

2

Just put the anchor element on the outside of the label element.

<input type="checkbox" id="my-id">
<a href="javascript:void(0)"><label for="my-id">Some text</label></a>

edited Feb 04 '17 at 08:30

answered Feb 04 '17 at 08:27

score 1 · Answer 5 · answered Feb 04 '17 at 08:25

<input type="checkbox" id="my-id">
<label for="my-id"><a href="javascript:void(0)" target="my-id">Some text</a></label>
<script>
  document.querySelector("label[for=my-id] > a")
  .onclick = function(e) {
    var el = document.getElementById(
      this.parentElement.htmlFor
    );
    el.checked = !el.checked;
  }
</script>

score 0 · Answer 6 · answered Feb 04 '17 at 08:11

0

You need to reverse, include label in a:

<input type="checkbox" id="my-id" >
<a href="javascript:void(0)"><label for="my-id">Some text</label></a>

JSFiddle

answered Feb 04 '17 at 08:11

BladeMight

2,670
2
21
35

1

Main question was: `when clicking on "Some text", it doesn't toggle the checkbox status.` I think my example solves it, who and why downwoted? – BladeMight Feb 04 '17 at 08:16

tag inside tag not triggering checkbox

6 Answers6

Linked

Related