Sometimes, you may need to find which item of your CheckboxList is selected and get it's value on client. Normally ASP .NET CheckboxList does not send its item 's value to client. So if you want to have it, you have to added it your self. In this post I 'm going to show you a simple way to get selected checkbox list item 's value.
First I prepared a checkbox list with some items. In this sample I have added some item manually but you can do this using DataBinding.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatLayout="Table">
<asp:ListItem Text="Test" Value="110" />
<asp:ListItem Text="Test2" Value="220" />
<asp:ListItem Text="Test3" Value="330" />
<asp:ListItem Text="Test4" Value="440" />
</asp:CheckBoxList>
Next, I have to add items value as an attribute for the items:
protected void Page_Load(object sender, EventArgs e)
{
foreach (ListItem li in CheckBoxList1.Items)
li.Attributes.Add("mainValue", li.Value);
}
Finally, you need to assign a function as click event handler for items. The point is that you can not do it just like the other html element on your page. So I will write a few line of code to add this event handler.
<script>
function AddHandler()
{
var tbl = document.getElementById('<%= CheckBoxList1.UniqueID %>');
for(var i=0;i<tbl.cells.length;i++)
{
var cell = tbl.cells[i];
cell.childNodes[0].onclick = function ()
{
if(window.event.srcElement.checked)
alert(window.event.srcElement.parentNode.attributes["mainValue"].value);
};
}
}
</script>
Notice that I will call this function ("AddHandler") on onload on body.
<body onload="AddHandler();">
The only thing that you have to be carefull is that this codes will work when you are using CheckboxList with RepeatLayout property is "Table".
Download the sample code from here:
http://www.tabatabaei.info/csharpsamples/EventArgsSample.rar
Wednesday, December 3, 2008
Value of Selected CheckboxList Item in Javascript
Subscribe to:
Post Comments (Atom)
6 comments:
great post masoud,
i learned a new point from you as usual but note that sample code link broken.
also i had some problems with using the script inside a 'head' tag and it throw 'The Controls collection cannot be modified because the control contains code blocks' exception
after some challenge,find that if we use a stylesheettheme="blah blah" in web.config
and write script in 'head' section,it throw exception but if we clean stylesheettheme or use script out side of 'head' section,everything will be ok
This doesn't works, when the checkbox list has selected items which are selected from the server side, because the subscribe to the click event of the checkbox.
I prefer to use callbacks to detect the values.
Great stuff dude...
Hi Masoud,
Great article. I was hoping maybe you might be able to tell me who I might amend your solution so that it work for a dropdown list, such that selection of an item in the dropdown would show the attributes for that dropdown list item?
thanks in advance,
Brendan
Great post Masoud Tabatabaei.. thanks
great post ..so informatic
Post a Comment