Sérialiser un formulaire avec des checkboxes multiples

Lorsqu’on a une série de checkboxes possédant le même atribut name dans un formulaire, leur données sont postées ensemble, ce qui permet de les récupérer en une seule variable de type array en PHP par exemple. Cependant en Javascript, pour sérialiser les champs multiples comme on le souhaite (ici séparés par une virgule), il faut traiter l’ensemble du formulaire et associer les champs portant le même nom.

$.fn.kodexSerialize = function(){
	var form = this;
	var dataArray = form.serializeArray();
	
	var dataObj = {};
	$.each(dataArray, function(index, elem){
		if( dataObj[elem.name] ){
			// si l'indice existe déjà, on ajoute à la suite
			dataObj[elem.name] += ","+elem.value;	
		}else{
			dataObj[elem.name] = elem.value;
		}
	});

	var string = '';
	$.each(dataObj, function(k, v){
		string += (string!='') ? '&' : '';
		string += k+'='+v;
	});

	return string;
};

$.fn.kodexSerialize = function(){

var form = this;

var dataArray = form.serializeArray();

var dataObj = {};

$.each(dataArray, function(index, elem){

if( dataObj[elem.name] ){

// si l'indice existe déjà, on ajoute à la suite

dataObj[elem.name] += ","+elem.value;

}else{

dataObj[elem.name] = elem.value;

}

});

var string = '';

$.each(dataObj, function(k, v){

string += (string!='') ? '&' : '';

string += k+'='+v;

});

return string;

};

Ce qui nous donne :

<form>
    <input type="text" name="name" value="kodex">

    <input type="checkbox" name="colors" value="red" checked>
    <input type="checkbox" name="colors" value="green" checked>
    <input type="checkbox" name="colors" value="blue" checked>
    <input type="checkbox" name="colors" value="yellow">
</form>

<form>

</form>

form.serialize();
name=kodex&colors=red&color=green&color=blue

form.serialize();

name=kodex&colors=red&color=green&color=blue

form.kodexSerialize();
name=kodex&colors=red,green,blue

1 2	form.kodexSerialize(); name=kodex&colors=red,green,blue