SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make a checkbox checked by default and invisible.

    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. #2
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    <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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by JVLB; Jul 10, 2006 at 08:10.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,593
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall
    I agree with your other comments so the best alternative depends on how the checkbox is to be used before the form is submitted.
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •