Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display 2 divs with the same id via checkbox

    hi,

    im trying to build a form where if a person checks a checkbox then 2 (or more) hidden divs appear throughout the page.

    example:

    test [ ] checked


    display div here





    and here


    can anyone help me with this.


    heres the code that i have so far:


    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    div#breakfast, div#lunch, div#dinner {
    width: 600px;
    font: 200 12px helvetica,sans-serif;
    margin: 10px 0px 0px 40px;
    padding: 3px;
    border: 1px silver solid;
    display: none;
    }

    </style>
    <script type="text/javascript" language="javascript">





    function displayPanel(oCheckbox) {
    var bWhich = oCheckbox.checked;


    if (el = document.getElementById(oCheckbox.value))
    el.style.display = (bWhich) ? 'block' : 'none';
    }

    </script>
    </head>
    <body>
    <form>
    <br>
    <a href="http://www.codingforums.com/archive/index.php?t-23501.html%20" target="_blank">http://www.codingforums.com/archive/...p?t-23501.html
    </a>
    <h3>Which part of the event did you attend?</h3>
    <input type="checkbox" name="section" value="breakfast" onclick="displayPanel(this)" /> breakfast<br />
    <input type="checkbox" name="section" value="lunch" onclick="displayPanel(this)" /> lunch<br />
    <input type="checkbox" name="section" value="dinner" onclick="displayPanel(this)" /> dinner<br /><br />

    <div id="breakfast">
    breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast
    </div>

    <div id="lunch">
    lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch lunch
    </div>

    <div id="dinner">
    dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner dinner
    </div>

    <div id="breakfast">
    breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast breakfast
    </div>

    <br>
    hello

    </form>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    IDs MUST be unique. No exceptions.

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    aside from using the same id, is it possible to show 2 or more divs when a checkbox is checked?

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You can do whatever you want when a checkbox is checked:

    input type="checkbox" onclick="myFunction();"

    function myFunction()
    {
    do;
    what;
    ever;
    }


  •  

    Posting Permissions

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