Welcome to WebmasterWorld Guest from 54.158.228.55

Forum Moderators: open

Message Too Old, No Replies

need help with advanced checkbox

advanced checkbox, checkbox onclick

     
10:15 am on Mar 17, 2007 (gmt 0)

10+ Year Member



hello!

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
thanx

6:46 am on Mar 18, 2007 (gmt 0)

10+ Year Member



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;}
-->
</style>
<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';
}
// -->
</script>
</head>

<body>
<form name="ff" id="ff">
<input type="checkbox" id="cbox" onchange="che()">&nbsp;<label for="cbox" id="lcbox">Choose airbags</label>
</form>
<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>
</div>
</body>
</html>

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

12:25 pm on Mar 18, 2007 (gmt 0)

10+ Year Member



thanx, i got something that match better to me:

<HTML>
<HEAD>
<TITLE>Show Select Text in Label</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
<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>
</SELECT><BR>

<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>
</SELECT>
</FORM>

<SCRIPT type='text/javascript'>

ShowSelectInLabel=
{
sets:[],

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

boxObj.cBox=cBox;
boxObj.selBox=selBox;

if( (boxObj.label=document.getElementById(labelID)).firstChild)
boxObj.txt = boxObj.label.firstChild.data;
else
boxObj.label.appendChild(document.createTextNode(''));

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

cBox:function(boxObj)
{
if(boxObj.cBox.checked)
{
boxObj.label.firstChild.data=boxObj.selBox.selectedIndex>0?boxObj.selBox[boxObj.selBox.selectedIndex].text:boxObj.txt;
boxObj.selBox.style.display='block';
}
else
{
boxObj.label.firstChild.data=boxObj.txt;
boxObj.selBox.selectedIndex=0;
boxObj.selBox.style.display='none';
}
},

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

boxObj.label.firstChild.data=(selected?selection.text:boxObj.txt);
boxObj.selBox.style.display='none';
boxObj.cBox.checked=selected;
}
}

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

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

</SCRIPT>
</BODY>
</HTML>

1:08 pm on Mar 18, 2007 (gmt 0)

10+ Year Member



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:46 am on Mar 19, 2007 (gmt 0)

10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month