SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide/display sub checkboxes

    Hi,

    I'm building a search interface for one of my PHP&MySQL applications, and I would like the search box to display/hide a list of sub checkboxes depending on whether or not the main checkbox is displayed (selected=display, unselected=hide).

    Also, the list of checkboxes should dynamically expand, meaning that the main checkboxes will move apart to make room for the sub checkboxes in between.

    Anyone know of a script that does this or something similar?

    Thanks in advance !
    Sincerely,

    Eirik Johansen
    Netmaking AS

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done stuff like this before and am trying to find my old work so I can C&P it for you. Hopefully I will locate it...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would be great!
    Sincerely,

    Eirik Johansen
    Netmaking AS

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    tr.hideshow {
                 display: none;
                }
    
    </style>
    <script type="text/javascript" language="javascript">
    
    function toggle(oCheckbox) {
         var i = 0, bWhich = oCheckbox.checked, oForm = oCheckbox.form;
         while (oForm.elements[i] != oCheckbox) i++; //get index of calling box
         i++; //next box
         while (oForm.elements[i] && oForm.elements[i].className == 'boxgroup') {
                if (!bWhich) oForm.elements[i].checked = false; //if disabled, uncheck
                oForm.elements[i].disabled = !bWhich; //enable/disable group
                i++;
       }
         var oTR = oCheckbox.parentNode.parentNode.nextSibling; //get row
         oTR.style.display = (bWhich) ? 'block' : 'none'; //display or un-
    }
    
    </script>
    </head>
    <body>
    <form>
    <table width="120" cellspacing="2" cellpadding="6" border="1">
    <tr>
    <td bgcolor="pink"><input type="checkbox" onclick="toggle(this)">__search 1</td>
    </tr>
    <tr class="hideshow">
    <td style="padding-left:20px;background:tan;">
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 1a<br />
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 1b<br />
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 1c
    </td>
    </tr>
    <tr>
    <td bgcolor="pink"><input type="checkbox" onclick="toggle(this)">__search 2</td>
    </tr>
    <tr class="hideshow">
    <td style="padding-left:20px;background:tan;">
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 2a<br />
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 2b<br />
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 2c
    </td>
    </tr>
    <tr>
    <td bgcolor="pink"><input type="checkbox" onclick="toggle(this)">__search 3</td>
    </tr>
    <tr class="hideshow">
    <td style="padding-left:20px;background:tan;">
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 3a<br />
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 3b<br />
    <input type="checkbox" class="boxgroup" disabled="disabled"> search 3c
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    ::: certified wild guess :::

  5. #5
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, adios. That's exactly what I was looking for!
    Sincerely,

    Eirik Johansen
    Netmaking AS


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
  •