homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

need help with advanced checkbox
advanced checkbox, checkbox onclick

10+ Year Member

Msg#: 3284615 posted 10:15 am on Mar 17, 2007 (gmt 0)


can someone help me how do i make advanced checkbox,
i mean if someone click on checkbox, it must open small dropdown menu with advanced options,

let say checkbox is called "airbags"
if you click it , it opens choice with "1 airbag, 2 airbags, 4 airbags ...", if you choose something , menu gets closed and you can see checkbox with changed description, e.g.: "4x airbags". it also must have different value id.

i can send you url where i see it done, i just have no chance to code it. can someone make it for me , i'm gonna pay for it of course

if not advice someone who can help



10+ Year Member

Msg#: 3284615 posted 6:46 am on Mar 18, 2007 (gmt 0)

something like this may be :

<html><head><title>Checkbox menu</title>
<style type="text/css">
#menu {visibility : hidden; width : 100px; height : 100px; border : 1px solid #999;}
.mitem {visibility : inherit; width : 98px; height : 23px; background : #ff0; margin : 1px;}
<script type="text/javascript">
function che() {
var cb = document.getElementById("cbox");
var lcb = document.getElementById("lcbox");
var menu = document.getElementById("menu");
if(cb.checked == true) {
menu.style.visibility = 'visible'
else {
menu.style.visibility = 'hidden';
lcb.innerHTML = 'Choose airbags'

function mche(id) {
var lcb = document.getElementById("lcbox");
var menu = document.getElementById("menu");
var menu_item = document.getElementById(id);

lcb.innerHTML = menu_item.innerHTML;
menu.style.visibility = 'hidden';
// -->

<form name="ff" id="ff">
<input type="checkbox" id="cbox" onchange="che()">&nbsp;<label for="cbox" id="lcbox">Choose airbags</label>
<div id="menu">
<div id="mitem1" class="mitem" onclick="mche(this.id)">1 airbag</div>
<div id="mitem2" class="mitem" onclick="mche(this.id)">2 airbag</div>
<div id="mitem3" class="mitem" onclick="mche(this.id)">3 airbag</div>
<div id="mitem4" class="mitem" onclick="mche(this.id)">4 airbag</div>

Did not understand fully the following : "it also must have different value id." What do you mean?


10+ Year Member

Msg#: 3284615 posted 12:25 pm on Mar 18, 2007 (gmt 0)

thanx, i got something that match better to me:

<TITLE>Show Select Text in Label</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<FORM name='f1'>
<input type='checkbox' name='cb1' onclick="ShowSelectInLabel.cb(this,abSelect,'selOption')"><label id='selOption'>Add Airbags</label>
<SELECT name='abSelect'>
<option value=''>Please Select</option>
<option value='1'>1 Airbag</option>
<option value='2'>2 Airbags</option>
<option value='4'>4 Airbags</option>

<input type='checkbox' name='cb2' onclick="ShowSelectInLabel.cb(this,abSelect,'selOption')"><label id='selOption2'>Add Parking Assist</label>
<SELECT name='abSelect2'>
<option value=''>Please Select</option>
<option value='1'>Front Parking Assist</option>
<option value='2'>Rear Parking Assist</option>
<option value='3'>Front and Rear Parking Assist</option>

<SCRIPT type='text/javascript'>


init:function(cBox, selBox, labelID)
var boxObj=this.sets[cBox.name]=[];


if( (boxObj.label=document.getElementById(labelID)).firstChild)
boxObj.txt = boxObj.label.firstChild.data;

boxObj.selBox.onchange=new Function("ShowSelectInLabel.selBox(ShowSelectInLabel.sets['"+cBox.name+"'])");
boxObj.cBox.onclick=new Function("ShowSelectInLabel.cBox(ShowSelectInLabel.sets['"+cBox.name+"'])");


var selected = boxObj.selBox.selectedIndex > 0,
selection= selected?boxObj.selBox[boxObj.selBox.selectedIndex]:null;


ShowSelectInLabel.init(document.forms.f1.cb1, document.forms.f1.abSelect, 'selOption');

ShowSelectInLabel.init(document.forms.f1.cb2, document.forms.f1.abSelect2, 'selOption2');



10+ Year Member

Msg#: 3284615 posted 1:08 pm on Mar 18, 2007 (gmt 0)

Well, may be you are right. But my script's been created in 15 min. only. If you prefer complex solutions to simplicity - let it be. At the same time do not forget about usability issues. The later example requires 2 clicks vs. 1 in mine example to do the same. To escape this it's better to add "size" attribute to both select boxes may be. And finally I do not understand the primary idea in the end - why to hide select boxes at all? All this are obsolete and useless tricks. IMHO, of course.


10+ Year Member

Msg#: 3284615 posted 10:46 am on Mar 19, 2007 (gmt 0)

i like that idea because why to show other options, if someone has chosen some option, it's saving with space.
thanx anyway for your imputs...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved