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

**jordonj** · 06-02-2008, 02:58 PM

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?

**jordonj** · 06-02-2008, 04:25 PM

multiselect1.png

**JMRKER** · 06-02-2008, 05:24 PM

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>

**jordonj** · 06-03-2008, 09:01 AM

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         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>

**JMRKER** · 06-03-2008, 09:56 AM

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.

**JMRKER** · 06-03-2008, 10:14 AM

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>

**jordonj** · 06-03-2008, 12:52 PM

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>

**JMRKER** · 06-03-2008, 02:31 PM

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?

**jordonj** · 06-03-2008, 03:03 PM

Here are my functions:

PHP Code:


<html> <head> <script language="JavaScript">

function ExposeList() { 

var status = document.getElementByName('VIOLATIONS');

for(var i = 0; i < 2; i++ ) {

    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

**JMRKER** · 06-03-2008, 03:20 PM

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 ...

**jordonj** · 06-03-2008, 03:41 PM

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?

**JMRKER** · 06-03-2008, 05:03 PM

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.

**mrv** · 12-21-2009, 09:00 AM

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 !!