Si alguno ha tratado de obtener el valor de cada elemento del checkboxlist, pero desde javascript, se habrá dado cuenta que no es tan sencillo. Y es que si revisamos el código fuente que genera el checkboxlist, veremos que no tiene el atributo “value”, por lo tanto si intentamos obtener ese dato desde javascript obtendremos “undefined”, si es que lo intentas lo comprobarás.
Entonces, cómo lo hacemos?
Bueno la idea sería que le ates una función javascript a cada elemento del checkboxlist, pero hay que hacerlo en el momento que estás cargando los elementos desde el lado del servidor.
Vamos a hacer un ejemplo para demostrar esto.
El ejemplo consiste en crear una lista de tareas, las cuales se van añadiendo a una lista Generics.
Luego pasamos cada elemento de la lista al checkboxlist, y al mismo tiempo vamos amarrándole una función javascript, en la cual ya le estamos pasando como parámetros el id de cada tarea y al mismo tiempo el estado (si está checked o no).
Pero esta función javascript se activará al hacer click sobre cualquier elemento. Lo cual es muy propicio, pues nos dará la opción de que con esos datos obtenidos realizar alguna acción, como por ejemplo actualizar la información en la base de datos mediante un pageMethod… o lo que estimes conveniente.
Vamos al código:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Javascript - Obtener el valor y estado de cada elemento del checkboxlist</title> <style type="text/css"> * { font-family: Trebuchet MS; background-color: #fcf3e2;} </style> <script type="text/javascript"> function ShowData(id, checked) { alert(id); alert(checked); } </script> </head> <body> <form id="form1" runat="server"> <asp:CheckBoxList ID="CheckBoxList1" runat="server"> </asp:CheckBoxList> </form> </body> </html>
código C#:
protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) return; List<ListItem> Tasks = new List<ListItem>(); Tasks.Add(new ListItem("Comprar champú para bañar al perro.", "11")); Tasks.Add(new ListItem("Terminar de leer el libro de Microsoft SharePoint 2010.", "22")); Tasks.Add(new ListItem("Enviar el mensaje de correo a Johnny Serrano.", "33")); Tasks.Add(new ListItem("Hacer un nuevo post para el blog.", "44")); Tasks.Add(new ListItem("Comprar la revista Condorito.", "55")); Tasks.Add(new ListItem("Pagar el recibo de luz, agua y teléfono.", "66")); int i = 0; foreach (ListItem Task in Tasks) { CheckBoxList1.Items.Add(Task); CheckBoxList1.Items[i].Attributes.Add("onclick", String.Format("ShowData({0},this.checked);", Task.Value)); i +=1; } }
Espero que les sea de utilidad ;)
No hay comentarios.:
Publicar un comentario