Make a checkbox checked by default and invisible

JavaScript
1

I have a checkbox which I would like to have checked by default and invisible to the viewer. Anyone know how I can do this?

2

That isn’t a JavaScript question; it’s a HTML and CSS question. To set the box as checked, give the input element a checked property. To make it invisible give it a style of either display:none; or visibility:hidden;

3

<input type=“hidden” name=“checkbox” value=“checked”>

Unless you are planning on the checkbox needing to be made visible at some point via Javascript then that is all you need.

4

Unfortunately, specifying type=“hidden” does not produce a checkbox input, but a hidden text input. Specifying value=“checked” makes the word ‘checked’, the string value of the field.

I think this is more like what the poster has requested:
<input type=“checkbox” checked=“true” style=“display:none;” />

5

That code wont work at all.

  1. The field has no name and so wont get passed to the server.
  2. The field has no value and so is more difficult to test on the server if it were passed.
  3. The field has display:none which means that some browsers wont pass it to the server with the rest of the form anyway.

As far as the server processing the form is concerned all of the fields passed to it are text fields. The only difference with checkboxes is that the field only gets passed at all if it has a name and is visible in the form. If you want to pass hidden fields then you have to assign them as hidden fields.

6

You are of course, correct that a checkbox is required to have a name and value in valid HTML. My intent was to show a skeleton of the tag with the relevant pieces.

You are also correct that my hasty choice of display:none; was a poor one. Taken literally by the browser, an element so styled should not become part of the document tree.

I think you will find, however, that an input element (replete with name and value, of course) with a style of visibility:hidden; does become part of the tree and its name/value pair will be sent to the server with the form it is part of.

Should one wish to avoid disturbing the flow of the document containing the element, the added style of position:absolute; can be used and, also, does not interefere with the name/value pair’s submission.

Oh, and I must admit another error in my off-the-cuff reply, it should be checked=“checked”, at least if the W3C is to be believed.

7

That way would work. You’d only need to do it that way if you intended to make it visible at some point though as otherwise a hidden field would serve the same purpose and be easier to code.

8

It might also be of use in a variety of other circumstances. Consider: if the checkbox were part of an array of other checkboxes to be processed at the server, if a client-side script manipulates checkboxes as a group, if a client-side script modifies the checked property, etc.

It should be noted that if the box may, at some point, become unchecked for whatever reason, using the checkbox will save bandwidth and, Lord knows, the world needs more bandwidth. But then, perhaps, you side with those who are against Net neutrality.

In a less rhetorically-flippant vein, don’t forget that the HTML Hidden element attribute, while simple and effective, is a holdover and conflicts with the W3C’s stated principle of separating semantic and presentational markup.

9

I’d have thought that a hidden form field is part of the semantic content of the form although I suppose to separate out the presentation you would want to make it a readonly input field instead and then hide it with CSS (although that does make for longer code).

I agree with your other comments so the best alternative depends on how the checkbox is to be used before the form is submitted.

10

Quite. I guess now we’ll have to find another expired equine to flagellate. It is all something of a catch-22, however; the attribute supports my Lynx, but at some future point may fail on newer platforms due to the application of the separation principle. This means, of course, you’ll have to use both the attribute and the CSS to accommodate legacy platforms while future-proofing for the brave new world (tee hee).