www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: How do I create a drop-down list of checkboxes?

  1. #1
    Join Date
    Jun 2008
    Posts
    39

    How do I create a drop-down list of checkboxes?

    I have a multiple select list, where each option is a different field. I can't get the script to update the fields upon selection.
    I want to make the list checkboxes for easier selection. How can I do this?

  2. #2
    Join Date
    Jun 2008
    Posts
    39

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question Unsure of the final design, but ...

    Is this what you want to do?
    PHP Code:
    <html>
    <
    head>
    <
    title>Scrolling Checkboxes</title>
    <
    script type="text/javascript">

    </script>
    </head>
    <body>
    <div id="ScrollCB" style="height:150;width:200px;overflow:auto">
     <input type="checkbox" id="scb1" name="scb1" value="1">As Seen On Tv<br>
     <input type="checkbox" id="scb2" name="scb2" value="2">Back To Basics<<br>
     <input type="checkbox" id="scb3" name="scb3" value="3">Bed Bath &amp; Beyond<br>
     <input type="checkbox" id="scb4" name="scb4" value="4">Black and Decker<br>
     <input type="checkbox" id="scb5" name="scb5" value="5">Borch<br>
     <input type="checkbox" id="scb6" name="scb6" value="6">Culsinart<br>
     <input type="checkbox" id="scb7" name="scb7" value="7">Dualit Lite<br>
     <input type="checkbox" id="scb8" name="scb8" value="8">"Easton<br>
     <input type="checkbox" id="scb9" name="scb9" value="9">Euro Cuisine<br>
     <input type="checkbox" id="scb10" name="scb10" value="10">Euro-Pro<br>
     <input type="checkbox" id="scb11" name="scb11" value="11">Farberware<br>
     <input type="checkbox" id="scb12" name="scb12" value="12">Gator<br>
     <input type="checkbox" id="scb13" name="scb13" value="13">Hamilton Beach<br>
     <input type="checkbox" id="scb14" name="scb14" value="14">Hansgrohe<br>
     <input type="checkbox" id="scb15" name="scb15" value="15">International Playthings<br>
     <input type="checkbox" id="scb16" name="scb16" value="16">Kitchen Aid<br>
    </div>
    </body>
    </html> 

  4. #4
    Join Date
    Jun 2008
    Posts
    39
    that is EXACTLY what I needed!!! THANKS!!!

    newbie... don't know what a div is... where can I go to research that?

    any way to put a border around the box?

    one last question... I have a radio button I want to use to control the displaying of this box. Is that possible; how do I do that?

    THANK YOU!!!

    but, there is a problem... it's not unchecking the box if I unselect? here's my code...
    <tr>
    <td class="one" nowrap="nowrap" align="left">Driver Violations</td>
    <td class="two" nowrap="nowrap" align="left">
    <input onclick="YesAnswer()" type="radio" ${disabled('VIOLATIONS')} ${checked('VIOLATIONS',row.VIOLATIONS,'Y')} name="VIOLATIONS" value="Y" />Yes
    <input onclick="NoAnswer()" type="radio" ${disabled('VIOLATIONS')} ${checkeddft('VIOLATIONS',row.VIOLATIONS,'N')} name="VIOLATIONS" value="N" />No&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Violations<strong> </strong>
    <div id="ScrollCB" style="OVERFLOW: auto; WIDTH: 200px; HEIGHT: 150px">
    <input id="VSPEED" type="checkbox" ${disabled('VSPEED')} ${checked('VSPEED',row.VSPEED,'X')} name="VSPEED" value="X" />Excessive Speed<br />
    <input id="VTOOCLOSE" type="checkbox" ${disabled('VTOOCLOSE')} ${checked('VTOOCLOSE',row.VTOOCLOSE,'X')} name="VTOOCLOSE" value="X" />Follows Too Close<br />
    <input id="VBLOCKTRAF" type="checkbox" ${disabled('VBLOCKTRAF')} ${checked('VBLOCKTRAF',row.VBLOCKTRAF,'X')} name="VBLOCKTRAF" value="X" />Blocks Traffic<br />
    <input id="VPASSHILL" type="checkbox" ${disabled('VPASSHILL')} ${checked('VPASSHILL',row.VPASSHILL,'X')} name="VPASSHILL" value="X" />Pass on Hill<br />
    <input id="VPASSCURVE" type="checkbox" ${disabled('VPASSCURVE')} ${checked('VPASSCURVE',row.VPASSCURVE,'X')} name="VPASSCURVE" value="X" />Pass on Curve<br />
    <input id="VPASSINTER" type="checkbox" ${disabled('VPASSINTER')} ${checked('VPASSINTER',row.VPASSINTER,'X')} name="VPASSINTER" value="X" />Pass in Intersection<br />
    <input id="VIMPRPASS" type="checkbox" ${disabled('VIMPRPASS')} ${checked('VIMPRPASS',row.VIMPRPASS,'X')} name="VIMPRPASS" value="X" />Improper Passing<br />
    <input id="VNOSIGNAL" type="checkbox" ${disabled('VNOSIGNAL')} ${checked('VNOSIGNAL',row.VNOSIGNAL,'X')} name="VNOSIGNAL" value="X" />Does Not Signal<br />
    <input id="VWEAVING" type="checkbox" ${disabled('VWEAVING')} ${checked('VWEAVING',row.VWEAVING,'X')} name="VWEAVING" value="X" />Weaving<br />
    <input id="VIMPRTURN" type="checkbox" ${disabled('VIMPRTURN')} ${checked('VIMPRTURN',row.VIMPRTURN,'X')} name="VIMPRTURN" value="X" />Improper Turn<br />
    <input id="VSIGNALVLT" type="checkbox" ${disabled('VSIGNALVLT')} ${checked('VSIGNALVLT',row.VSIGNALVLT,'X')} name="VSIGNALVLT" value="X" />Signal Violation<br />
    <input id="VSIGNVLT" type="checkbox" ${disabled('VSIGNVLT')} ${checked('VSIGNVLT',row.VSIGNVLT,'X')} name="VSIGNVLT" value="X" />Sign Violation<br />
    <input id="VIMPRPARK" type="checkbox" ${disabled('VIMPRPARK')} ${checked('VIMPRPARK',row.VIMPRPARK,'X')} name="VIMPRPARK" value="X" />Improperly Parked<br />
    <input id="VPASSENGER" type="checkbox" ${disabled('VPASSENGER')} ${checked('VPASSENGER',row.VPASSENGER,'X')} name="VPASSENGER" value="X" />Passenger<br />
    <input id="VOTHER" type="checkbox" ${disabled('VOTHER')} ${checked('VOTHER',row.VOTHER,'X')} name="VOTHER" value="X" />Other<br /></div>
    <span class="errortext"></span>
    </td>
    </tr>
    Last edited by jordonj; 06-03-2008 at 09:18 AM.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Thumbs up

    that is EXACTLY what I needed!!! THANKS!!!

    newbie... don't know what a div is... where can I go to research that?

    any way to put a border around the box?

    one last question... I have a radio button I want to use to control the displaying of this box. Is that possible; how do I do that?

    THANK YOU!!!
    Your welcome.

    Now to answer some of your questions:

    1. The <DIV> is an HTML tag to define a space of related information. Lots of information available in tutorials and books and on-line.

    2. You can put a box around the <DIV> section using a CSS modification (another area of vast information available)
    For a start, try:
    PHP Code:
    <div id="ScrollCB" style="height:150;width:200px;overflow:auto;border:1px solid blue"
    3. A radio button is not a good choice for ON/OFF selection. You need at least 2 RBs as once selected, it is difficult to change only one RBtn back to the off position.
    I would recommend using a checkbox where clicked set shows the <DIV> section and clicked blank hides it.
    There are loads of examples of a show / hide section using the search button for this forum.

    Finally, you supplied code is difficult to read. In the future I would recommend putting it within the forum tags of [ code][ /code]
    or [ php][ /php] (without the spacc between, like [xxx]script contents[/xxx]to make it a. standout, b. easirer to read and c. more cut/paste friendly for testing.

    Post back if you cannot find a solution that works for you.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Arrow

    Using the example given:
    PHP Code:
    <html>
    <
    head>
    <
    title>Scrolling Checkboxes</title>
    <
    script type="text/javascript">
    function 
    ExposeList() {
      var 
    status document.getElementById('cbChoices').checked;
      if (
    status == true) { document.getElementById('ScrollCB').style.display "block"; }
                     else { 
    document.getElementById('ScrollCB').style.display 'none'; }
    }
    </script>
    </head>
    <body>
    <input type="checkbox" id="cbChoices" onclick="ExposeList()">Show Choices<br>
    <div id="ScrollCB" style="height:150;width:200px;overflow:auto;border:1px solid blue;display:none">
    <input type="checkbox" id="scb1" name="scb1" value="1">As Seen On Tv<br>
    <input type="checkbox" id="scb2" name="scb2" value="2">Back To Basics<<br>
    <input type="checkbox" id="scb3" name="scb3" value="3">Bed Bath &amp; Beyond<br>
    <input type="checkbox" id="scb4" name="scb4" value="4">Black and Decker<br>
    <input type="checkbox" id="scb5" name="scb5" value="5">Borch<br>
    <input type="checkbox" id="scb6" name="scb6" value="6">Culsinart<br>
    <input type="checkbox" id="scb7" name="scb7" value="7">Dualit Lite<br>
    <input type="checkbox" id="scb8" name="scb8" value="8">"Easton<br>
    <input type="checkbox" id="scb9" name="scb9" value="9">Euro Cuisine<br>
    <input type="checkbox" id="scb10" name="scb10" value="10">Euro-Pro<br>
    <input type="checkbox" id="scb11" name="scb11" value="11">Farberware<br>
    <input type="checkbox" id="scb12" name="scb12" value="12">Gator<br>
    <input type="checkbox" id="scb13" name="scb13" value="13">Hamilton Beach<br>
    <input type="checkbox" id="scb14" name="scb14" value="14">Hansgrohe<br>
    <input type="checkbox" id="scb15" name="scb15" value="15">International Playthings<br>
    <input type="checkbox" id="scb16" name="scb16" value="16">Kitchen Aid<br>
    </div>
    </body>
    </html> 

  7. #7
    Join Date
    Jun 2008
    Posts
    39
    Ok, so I have the show/hide working for the radio buttons, but how do I do the initial setting? I put the code in the window.onload, but it doesn't set it correctly based on the button?

    Also, I still can't get the unchecking of the list to work; they always stay checked.

    PHP Code:
    <tr>
                                                    <
    td class="one" nowrap="nowrap" align="left">Driver Violations</td>
                                                    <
    td class="two" nowrap="nowrap" align="left">
    <
    input onclick="YesAnswer()" type="radio" ${disabled('VIOLATIONS')} ${checked('VIOLATIONS',row.VIOLATIONS,'Y')} name="VIOLATIONS" value="Y" />Yes 
    <input onclick="NoAnswer()" type="radio"  ${disabled('VIOLATIONS')} ${checkeddft('VIOLATIONS',row.VIOLATIONS,'N')} name="VIOLATIONS" value="N" />No
                                                    
    <div id="ScrollCB" style="OVERFLOW: auto; WIDTH: 200px; HEIGHT: 150px">
    <
    input id="VSPEED" type="checkbox" ${disabled('VSPEED')} ${checked('VSPEED',row.VSPEED,'X')} name="VSPEED" value="X" />Excessive Speed<br />
    <
    input id="VTOOCLOSE" type="checkbox" ${disabled('VTOOCLOSE')} ${checked('VTOOCLOSE',row.VTOOCLOSE,'X')} name="VTOOCLOSE" value="X" />Follows Too Close<br />
    <
    input id="VBLOCKTRAF" type="checkbox" ${disabled('VBLOCKTRAF')} ${checked('VBLOCKTRAF',row.VBLOCKTRAF,'X')} name="VBLOCKTRAF" value="X" />Blocks Traffic<br />
    <
    input id="VPASSHILL" type="checkbox" ${disabled('VPASSHILL')} ${checked('VPASSHILL',row.VPASSHILL,'X')} name="VPASSHILL" value="X" />Pass on Hill<br />
    <
    input id="VPASSCURVE" type="checkbox" ${disabled('VPASSCURVE')} ${checked('VPASSCURVE',row.VPASSCURVE,'X')} name="VPASSCURVE" value="X" />Pass on Curve<br />
    <
    input id="VPASSINTER" type="checkbox" ${disabled('VPASSINTER')} ${checked('VPASSINTER',row.VPASSINTER,'X')} name="VPASSINTER" value="X" />Pass in Intersection<br />
    <
    input id="VIMPRPASS" type="checkbox" ${disabled('VIMPRPASS')} ${checked('VIMPRPASS',row.VIMPRPASS,'X')} name="VIMPRPASS" value="X" />Improper Passing<br />
    <
    input id="VNOSIGNAL" type="checkbox" ${disabled('VNOSIGNAL')} ${checked('VNOSIGNAL',row.VNOSIGNAL,'X')} name="VNOSIGNAL" value="X" />Does Not Signal<br />
    <
    input id="VWEAVING" type="checkbox" ${disabled('VWEAVING')} ${checked('VWEAVING',row.VWEAVING,'X')} name="VWEAVING" value="X" />Weaving<br />
    <
    input id="VIMPRTURN" type="checkbox" ${disabled('VIMPRTURN')} ${checked('VIMPRTURN',row.VIMPRTURN,'X')} name="VIMPRTURN" value="X" />Improper Turn<br />
    <
    input id="VSIGNALVLT" type="checkbox" ${disabled('VSIGNALVLT')} ${checked('VSIGNALVLT',row.VSIGNALVLT,'X')} name="VSIGNALVLT" value="X" />Signal Violation<br />
    <
    input id="VSIGNVLT" type="checkbox" ${disabled('VSIGNVLT')} ${checked('VSIGNVLT',row.VSIGNVLT,'X')} name="VSIGNVLT" value="X" />Sign Violation<br />
    <
    input id="VIMPRPARK" type="checkbox" ${disabled('VIMPRPARK')} ${checked('VIMPRPARK',row.VIMPRPARK,'X')} name="VIMPRPARK" value="X" />Improperly Parked<br />
    <
    input id="VPASSENGER" type="checkbox" ${disabled('VPASSENGER')} ${checked('VPASSENGER',row.VPASSENGER,'X')} name="VPASSENGER" value="X" />Passenger<br />
    <
    input id="VOTHER" type="checkbox" ${disabled('VOTHER')} ${checked('VOTHER',row.VOTHER,'X')} name="VOTHER" value="X" />Other<br /></div>
    <
    span class="errortext"></span>
    </
    td>
                                                </
    tr

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question Can you give some specifics ...

    Ok, so I have the show/hide working for the radio buttons, but how do I do the initial setting? I put the code in the window.onload, but it doesn't set it correctly based on the button?

    Also, I still can't get the unchecking of the list to work; they always stay checked.
    I'm not sure I understand the problem.

    I'm not sure what language you are using, PHP? something else?
    What 'initial setting' are you talking about?
    Where is the 'onload' that is not working for you?
    Which unchecking does not work?

    Is is your script that is not working or is it the one I posted?

  9. #9
    Join Date
    Jun 2008
    Posts
    39
    Here are my functions:

    PHP Code:
    <html> <head> <script language="JavaScript">
    function 
    ExposeList() { 
    var 
    status document.getElementByName('VIOLATIONS');
    for(var 
    02i++ ) {
        if (
    status[i].value == "Y") { document.getElementById('ScrollCB').style.display "block"; } 
        else { 
    document.getElementById('ScrollCB').style.display 'none'; } 


    function 
    YesAnswer() { 
    document.getElementById('ScrollCB').style.display "block"
    }
    function 
    NoAnswer() {
    document.getElementById('ScrollCB').style.display 'none';
    }
    </script>
    </head>
    <body onload="ExposeList()"> 
    That last line doesn't execute, or I have the function wrong, because even when VIOLATIONS = N, it displays the list (shown in the attachment). It is correct for the button pressing.
    PHP Code:
    <tr> <td class="one" nowrap="nowrap" align="left">Driver Violations</td>
    <
    td class="two" nowrap="nowrap" align="left">
    <
    input onclick="YesAnswer()" type="radio" ${disabled('VIOLATIONS')} ${checked('VIOLATIONS',row.VIOLATIONS,'Y')} name="VIOLATIONS" value="Y" />Yes 
    <input onclick="NoAnswer()" type="radio"  ${disabled('VIOLATIONS')} ${checkeddft('VIOLATIONS',row.VIOLATIONS,'N')} name="VIOLATIONS" value="N" />No
    <div id="ScrollCB" style="BORDER-RIGHT: lightblue 1px solid; BORDER-TOP: lightblue 1px solid; OVERFLOW: auto; BORDER-LEFT: lightblue 1px solid; WIDTH: 200px; BORDER-BOTTOM: lightblue 1px solid; HEIGHT: 105px">
    <
    input id="VSPEED" type="checkbox" ${disabled('VSPEED')} ${checked('VSPEED',row.VSPEED,'X')} name="VSPEED" value="X" />Excessive Speed<br />
    <
    input id="VTOOCLOSE" type="checkbox" ${disabled('VTOOCLOSE')} ${checked('VTOOCLOSE',row.VTOOCLOSE,'X')} name="VTOOCLOSE" value="X" />Follows Too Close<br />
    <
    input id="VBLOCKTRAF" type="checkbox" ${disabled('VBLOCKTRAF')} ${checked('VBLOCKTRAF',row.VBLOCKTRAF,'X')} name="VBLOCKTRAF" value="X" />Blocks Traffic<br />
    <
    input id="VPASSHILL" type="checkbox" ${disabled('VPASSHILL')} ${checked('VPASSHILL',row.VPASSHILL,'X')} name="VPASSHILL" value="X" />Pass on Hill<br />
    <
    input id="VPASSCURVE" type="checkbox" ${disabled('VPASSCURVE')} ${checked('VPASSCURVE',row.VPASSCURVE,'X')} name="VPASSCURVE" value="X" />Pass on Curve<br />
    <
    input id="VPASSINTER" type="checkbox" ${disabled('VPASSINTER')} ${checked('VPASSINTER',row.VPASSINTER,'X')} name="VPASSINTER" value="X" />Pass in Intersection<br />
    <
    input id="VIMPRPASS" type="checkbox" ${disabled('VIMPRPASS')} ${checked('VIMPRPASS',row.VIMPRPASS,'X')} name="VIMPRPASS" value="X" />Improper Passing<br />
    <
    input id="VNOSIGNAL" type="checkbox" ${disabled('VNOSIGNAL')} ${checked('VNOSIGNAL',row.VNOSIGNAL,'X')} name="VNOSIGNAL" value="X" />Does Not Signal<br />
    <
    input id="VWEAVING" type="checkbox" ${disabled('VWEAVING')} ${checked('VWEAVING',row.VWEAVING,'X')} name="VWEAVING" value="X" />Weaving<br />
    <
    input id="VIMPRTURN" type="checkbox" ${disabled('VIMPRTURN')} ${checked('VIMPRTURN',row.VIMPRTURN,'X')} name="VIMPRTURN" value="X" />Improper Turn<br />
    <
    input id="VSIGNALVLT" type="checkbox" ${disabled('VSIGNALVLT')} ${checked('VSIGNALVLT',row.VSIGNALVLT,'X')} name="VSIGNALVLT" value="X" />Signal Violation<br />
    <
    input id="VSIGNVLT" type="checkbox" ${disabled('VSIGNVLT')} ${checked('VSIGNVLT',row.VSIGNVLT,'X')} name="VSIGNVLT" value="X" />Sign Violation<br />
    <
    input id="VIMPRPARK" type="checkbox" ${disabled('VIMPRPARK')} ${checked('VIMPRPARK',row.VIMPRPARK,'X')} name="VIMPRPARK" value="X" />Improperly Parked<br />
    <
    input id="VPASSENGER" type="checkbox" ${disabled('VPASSENGER')} ${checked('VPASSENGER',row.VPASSENGER,'X')} name="VPASSENGER" value="X" />Passenger<br />
    <
    input id="VOTHER" type="checkbox" ${disabled('VOTHER')} ${checked('VOTHER',row.VOTHER,'X')} name="VOTHER" value="X" />Other<br /></div>
    </
    td> </tr
    The boxes in the div list do not uncheck after accepting the changes on the page. (see attachment) My other checkboxes are the same, and they work fine. So, I am assuming it is something with the div object; do I need to set the values from the list?

    Attachment 11084
    Driver Violations.pdf

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Unhappy Sorry ...

    You've asked a question above my pay grade.

    I don't recognize the second part of your last post as javascript, so I don't know how to answer.
    I don't think it is the <DIV>, but that's just a gut feeling.

    Perhaps some other forum members have a clue.
    Let's hope ...

  11. #11
    Join Date
    Jun 2008
    Posts
    39
    I figured out the checkbox update. Thanks, anyway!!

    So, any idea why the list shows when the value is N initially?
    Is there anything else I can do?

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Perhaps the value of 'N' is sent as a string rather than a number.
    I'm not sure I see where it is initialized.
    Maybe add some logic to assure the value is a number
    like parseInt() or Number() functions.

  13. #13
    Join Date
    Dec 2009
    Posts
    4
    I'm trying to create a drop-down list of checkboxes, very similar to the multiselect1.png attached above. I have tried several things but have not been successful.
    Can it be done ?? If so, pleae show me how using jordonj example above ? Thanks !!

  14. #14
    Join Date
    Dec 2009
    Posts
    4

    mistake

    sorry, I meant JMRKER's example above. Thanks

  15. #15
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Question

    Quote Originally Posted by mrv View Post
    sorry, I meant JMRKER's example above. Thanks
    Which post?

    and

    What have you done so far that is NOT working? Post some code.

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