I have been playing around with html lately and ran into a slight issue.

Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:

<input type="checkbox" id=check1 status="display:none">Option 1<br>

But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?

I have been playing around with html lately and ran into a slight issue.

Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:

<input type="checkbox" id=check1 status="display:none">Option 1<br>

But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?

• javascript
• jquery
• html
• checkbox

• one mistake is here status="display:none" so Change to style="display:none" – Tarsem Singh Commented Aug 27, 2013 at 13:04
• 9 Answer in 5 minutes. Enjoy the luxurious variety. – insertusernamehere Commented Aug 27, 2013 at 13:08
• 1 @Tarsem woops! Yeah I used style in my code but for some reason wrote status on the question but yeah you are right – jizco Borneo Commented Aug 28, 2013 at 12:38

10 Answers 10

I would suggest using the <label>-tag around the whole thing:

<label style="display:none"><input type="checkbox" id="check1">Option 1</label>

This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.

Also note that status is not a valid attribute. For styling use style.

Wrap the input in a div and apply the "style" tag to the div.

<div style="display: none;">
  <input type="checkbox" id="check1">Option 1<br>
</div>

you need to wrap it in a span/label and then hide it

<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>

Place checkbox inside div and apply style to div

<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>

<span style="display:none"><input ...>Option 1</span>

or better

<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>

I'm sure you mean style="display:none and not status, but here goes:

Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:

<div id="checkboxcontainer" style="display: none">
    <input type="checkbox" id="check1">
    Option 1
    <br>
</div>

<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>

JS:

$('label[for="check1"]').hide();

try something like this

 <label style="display:none"><input type="checkbox" id=check1 >Option 1</label>

Use the below to get your desired need.

Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.

<label style="display:none"><input type="checkbox" id="check1">Option 1</label>

You also used status instead of style but by using the code above you'll do fine.

Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic. First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag. As all the other answers here wrote, you obviously need a label with your input tag:

<input type="checkbox" id="check1"><label for="check1" >Option 1</label>

You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):

<label for="check1"><input type="checkbox" id="check1">Option 1</label>

I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:

$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!

I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)

/J.