CODEWITHSUNDEEP
jqueryhtml
Mike Perrenoud
Mike Perrenoud

Reputation: 67898

Why isn't the label of the check box hidden when I hide it?

I have a check box:

<input type="checkbox" id="OutOfPocket">Are you okay with paying out-of-pocket for these services?</input>

and I have some jQuery to hide it:

$('#OutOfPocket').hide();

but the problem is that line doesn't hide the label. So, I tried the following commands to hide the label but all have been unsuccessful:

$('#OutOfPocket').next('label').hide();
$('#OutOfPocket').siblings('label').hide();
$('#OutOfPocket').next('input ~ label').hide();
$('#OutOfPocket').next('span').hide();
$('#OutOfPocket').siblings('span').hide();
$('#OutOfPocket').next('input ~ span').hide();

what code do I need to hide the text of the check box?

Upvotes: 0

Views: 132

Answers (3)

Rob Hruska
Rob Hruska

Reputation: 120286

As far as I know, <input/> doesn't support inner text like that. From <input> on MDN:

Permitted content - None, this is a void element.

Although it may appear as a label with whatever browser you're using, you probably want to use an actual <label> for your label.

<input type="checkbox" id="OutOfPocket"/><label for="OutOfPocket">Are you okay with paying out-of-pocket for these services?</label>

Upvotes: 5

sites
sites

Reputation: 21795

Try this:

<label for="OutOfPocket">
<input type="checkbox" id="OutOfPocket"/>
  <span>Are you okay with paying out-of-pocket for these services?</span>
</label>

This allows checkbox to be checked when you click in text.

And allows to hide text easily:

$('label span').hide()

Upvotes: 0

user1508519
user1508519

Reputation:

To add to Rob's answer, input tags are self-closing. For checkboxes, the value attribute is hidden. So you would indeed write the label after the input tag:

<input type="checkbox">Are you okay with paying out-of-pocket for these services?

In that case, you need to either wrap the thing in a container, ie a span tag, or to wrap the text in a label.

Upvotes: 0

Related Questions