Tuesday, December 16, 2008

use checkboxlist as checkboxsradiolist in javaScript

Hello,
In this week I got a very intresting problem and for solving it we have to use JAVAScript.
look a simple view on problem. we are using the checkbox list for selection cretieria.
we have 5 checkbox list but 2 check box list used as an radiobutton list. means user can select
one option at a time and his previous selection must be show until he choose the other next
choice.
Other three are simple in which new selction is added as we do by default.
so consentrate on problem. for solveing it i created function saveMouserOverID(control)
which get the id of control where mouse jump upon the control.
and after it created a javascript fucntion CheckUnCheckBox(crtl) wehre if control goes in to
default case it will unchech all check box expect the currently clicked check box.
b'cz this id is stored in saveMouseOverFunction();
view of the code is follows.
We can also store that id in hiddenfield and first uncheckall the checkbox and after it check
the control where id is stored in hidden field.

Thanks
HElpOnDesk Team


structure of checkboxList

[asp:CheckBoxList onClick="return CheckUnCheckBox('ssss');" ID="RS" OnSelectedIndexChanged="dosomeserverside"
RepeatColumns="setIntasuwant" CellSpacing="setIntasuwan"
runat="server" AutoPostBack="True"]
[asp:ListItem onmouseover="javascript:saveMouserOverID('0')" Text="select ALL" Value="Selectall"][ /asp:ListItem]
[asp:ListItem onmouseover="javascript:saveMouserOverID('1')" Text="helpindesk" Value="Helpondesk"][ /asp:ListItem]
[asp:ListItem onmouseover="javascript:saveMouserOverID('2')" Text="sanjeev"
Value="Sanjeev"][ /asp:ListItem]
[ /asp:ChekcBoxList/]


function saveMouserOverID(control)
{
controlid=control;

}

function CheckUnCheckBox(ctrl)
{
var checkbox = document.getElementById('ctl00_ContentPlaceHolder1_'+ctrl);
var inputlist = checkbox.getElementsByTagName("input");
var i=0;
var id;
switch(ctrl)
{
case "shape":
for(i=0; i[inputlist.length; i++)
{
//id = 'checkImage'+(parseInt(i)+parseInt('4'));
if(inputlist[i].checked)
{
if(controlid == 0 && controlid != i)
{
inputlist[i].checked = '';
// document.getElementById(id).src=imgFalse;
}
else if(controlid !=0 && i==0)
{
inputlist[i].checked = '';
//document.getElementById(id).src=imgFalse;
}
}
}
break;
case "color":
for(i=0; i[inputlist.length; i++)
{
//id = 'checkImage'+(parseInt(i)+parseInt('23'));
if(inputlist[i].checked)
{
if(controlid == 0 && controlid != i)
{
inputlist[i].checked = '';
//document.getElementById(id).src=imgFalse;
}
else if(controlid !=0 && i==0)
{
inputlist[i].checked = '';
//document.getElementById(id).src=imgFalse;
}
}
}
break;

default:
for(i=0; i[inputlist.length; i++)
{
// if(ctrl == 'weight')
// {
//
// }
// else if(ctrl == 'price')
// {
//
// }
if(inputlist[i].checked)
{
if(controlid != i)
{
inputlist[i].checked = '';

}
}
else
{
inputlist[i].checked = '';

}
}
}
}
[/script]

1 comment:

Programming and Database Concepts said...

Hi Sharma,
Seems to be intresting but some vague.
Could you please take screen shot of this application interface, so that it could be easy to understand.
You can take it as suggestion for what ever posts you do :)