www.webdeveloper.com
Results 1 to 4 of 4

Thread: If a checkbox is ticked?

Hybrid View

  1. #1
    Join Date
    Mar 2005
    Posts
    172

    If a checkbox is ticked?

    Hi,

    Wondering if anyone can point me in the right direction of a tutorial or posting with this.

    Say I have a form with a checkbox if it was ticked is there anyway I can get some javascript to trigger a input box appearing without hitting a submit button? And if the checkbox is not ticked that input box disappears?

    Thank you
    Last edited by chrisb; 06-20-2009 at 04:29 AM.

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    This should get you going on that:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Some Title</title>
    <script type="text/javascript">
    
    function checkToggleDisplay(el, otherEl) {
        if (el && el.tagName.toLowerCase() == 'input' && el.type == 'checkbox' && otherEl) {
            otherEl.style.display = (el.checked) ? 'block' : 'none';
        }
    }
    
    </script>
    </head>
    <body>
    <div>
    <form action="" name="someForm">
    Toggle hidden input 1: <input type="checkbox" onclick="checkToggleDisplay(this,this.form.hidInput1);"><br>
    Toggle hidden input 2: <input type="checkbox" onclick="checkToggleDisplay(this,this.form.hidInput2);"><br>
    <input type="text" name="hidInput1" value="This was hidden 1" style="display:none;"><br>
    <input type="text" name="hidInput2" value="This was hidden 2" style="display:none;">
    </form>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Mar 2005
    Posts
    172
    Nice! Thank you very much

  4. #4
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    It might be nice but it's very bad to do. Vast numbers of us out here don't use JavaScript so to keep your site working never hide something with CSS that will be later un-hidden with JavaScript. Instead do the initial hiding with JavaScript.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles