Checkbox múltiple

…del siguiente modo:

Tabla en la base de datos

Nomalmente uso comas para separarlos pero cuando esto es un problema tiro de caracteres menos frecuentes como la barra vertical |, por ejemplo.

Para convertir el contenido de un campo checkbox múltiple en una lista separada por comas utilizo esta función:

function chkd2lst(frm,fld)
	{
	var t="";var s=",";
	for(var i=0;i<document[frm].elements["_"+fld].length;i++)
		{
		if(document[frm].elements["_"+fld][i].checked)
			{
			t+=document[frm].elements["_"+fld][i].value+s;
			}
		}
	document[frm].elements[fld].value=t;
	alert(document[frm].elements[fld].value);
	}

La función chkd2lst espera el nombre del formulario y el nombre del campo checkbox múltiple. También define que la coma será el separador de los elementos de la lista (variable s) pero esto es fácilmente editable. Al final de la función hay un alert que puede ser eliminado, por supuesto. Está ahí simplemente para comprobar que la función funciona.

Supongamos que, como en el ejemplo de las imágenes, el campo se llama diasClase. El formulario ha de llamar entonces al javaScript de esta manera:

<form
	name="ficha"
	method="post"
	onSubmit="chkd2lst(this.name,'diasClase');return;"
>

Dentro del formulario, divido el tema del checkbox múltiple en dos partes. Por un lado la sucesión de checkboxes:

<input name="_diasClase" value="1" type="checkbox">Lunes
<input name="_diasClase" value="2" type="checkbox">Martes
<input name="_diasClase" value="3" type="checkbox">Miércoles
<input name="_diasClase" value="4" type="checkbox">Jueves
<input name="_diasClase" value="5" type="checkbox">Viernes
<input name="_diasClase" value="6" type="checkbox">Sábado

Y a continuación un campo hidden en el que guardaré la lista generada a partir de los checkboxes.

<input name="diasClase" value="" type="hidden">

La función espera que el nombre de los campos checkbox y hidden sean el mismo, pero que el nombre de cada input del checkbox múltiple vaya precedido de un guión bajo _ y que el nombre del campo hidden no lo lleve.

Y ya está: antes de enviar el formulario, chkd2lst convierte las opciones seleccionadas en _diasclase en una lista separada por comas y la lleva a diasclase. He colgado un ejemplo aquí en el que sustituyo el campo hidden por un campo text sólo para que se vea el resultado.

Próximamente publicaré otro artículo en el que trataré el proceso inverso, es decir: traigo de la base de datos un campo conteniendo la lista separada por comas y marco como checked los elementos correspondientes del checkbox multiple. Imprescindible para poder editar, claro.