Lier liste de checkbox à une liste déroulante

Bonjour,
Après avoir chercher longtemps chez notre ami google sans trouver de piste je remets entre vos mains mon soucis espérant que quelqu'un y jette un coup d'oeil et me donne une solution.
j'ai crée une liste déroulante avec différentes valeurs, j'obtiens une liste de checkbox differentes pour chaque valeur. J'ai rajouté une fonction javascript qui compte le nombre de cases cochées. et le mets dans un champ texte dont la valeur sera stocké dans la base. Jusque là ça marche.
Mais le souci c'est quand je mets tt ca dans mon application.Quand je change de valeur dans la liste déroulante et puis je décide de retourner vers la liste de checkbox où j'ai dejà coché des cases. je ne trouve rien.Toutes les cases sont à nouveau décoché. Ce qui normal parce que dans le code je lui demande de ramener la mm liste de checkbox que celle du début. Mais ce que je veux c'est qu'il garde les cases que j'ai cochés visibles. Meme après la sauvgarde du formulaire ou le raffraichissement de la page. (on saura qu'on a coché deux cases par exemple mais on saura pas lesquelles).voilà mon code:

<script>

function selectbasic(option)
{

switch(option.options[option.selectedIndex].value){
case "1":document.getElementById('div-cause').innerHTML = '<input name="text_qte1" type="checkbox" onClick="inc_decr1(this.checked);"/>un</br><input name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);"/>deux</br><input name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);" />trois</br><input  name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);" />quatre</br><input  name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);" />cinq</br><input type="text" id="pertinence" name="pertinence" size="50"value="" />   ';
break;
case "2":document.getElementById('div-cause').innerHTML = '<input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);"/>1</br><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);"/>2</br><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />3</br><input  name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />4</br><input  name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />5</br> <input type="text" id="pertinence" name="pertinence" size="50"value="" />  ';
break;
case "3":document.getElementById('div-cause').innerHTML = '<input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);"/>11</br><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);"/>12</br><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);" />13</br><input type="text" id="pertinence" name="pertinence" size="50"value="" />   ';
break;
case "4":document.getElementById('div-cause').innerHTML = '<input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);"/>21</br><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);"/>22</br><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);" />23</br><input  name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);" />24</br> <input type="text" id="pertinence" name="pertinence" size="50"value="" />  ';
break;
default:document.getElementById('div-cause').innerHTML = '';break;
}
}
var compteur1 = 0;
var compteur2 = 0;var compteur3 = 0;var compteur4 = 0;var compteur5 = 0;
function inc_decr1(val_input) {

if (val_input) {

compteur1++;
}else{
compteur1--;
}
if (compteur1<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur1 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur1/5);
}
}
function inc_decr2(val_input) {

if (val_input) {

compteur2++;
}else{
compteur2--;
}
if (compteur2<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur2 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur2/5);
}
}
function inc_decr3(val_input) {

if (val_input) {

compteur3++;
}else{
compteur3--;
}
if (compteur3<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur3 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur3/5);
}
}
function inc_decr4(val_input) {

if (val_input) {

compteur4++;
}else{
compteur4--;
}
if (compteur4<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur4 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur4/3);
}
}
function inc_decr5(val_input) {

if (val_input) {

compteur5++;
}else{
compteur5--;
}
if (compteur5<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur5 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur5/4);
}
}

</script>
	<tr>
  	<td width="30%">
      <div style="text-align: left; font-weight: bold;">Type&nbsp;</div>
    </td>
    <td >
    	<select class="inputbox" name="type" onchange="selectbasic(this);">
    	<option value="">-</option>
     	<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
    	</select>
    	<br>
		<!-- je veux récupèrer une liste de case à cocher dans  un champ caché -->
		<div id="div-cause"><input type="text" id="pertinence" name="pertinence" size="5" value="" ></div>
		  
    </td>
  </tr>

ça fait une semaine que je cherche. Je débute en javascript. il faut dire que j'y connais rien. Si qualsu'un peut m'aider Merci bcp.