paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Checkbox e gestione opzione seleziona tutti

Checkbox e gestione opzione "seleziona tutti"

Innanzitutto partiamo dal codice (php) che costruisce la checkbox dove tutti i valori, compreso quello relativo all'opzione "tutti", sono presenti nella base dati. Dalla tabella quindi estraggo i codici/id relativi alle varie opzioni, con i quali identifico sia i nomi (name) che gli id di ogni singolo check box, mentre la descrizione la uso esclusivamente per illustrarne il contenuto sulla form.

foreach ($aCountry as $keyCountry=>$valueCountry){
   echo "<td>$valueCountry<input type=\"checkbox\" name="country_$keyCountry\" id=\"country_$keyCountry\" value=\"$keyCountry\" onclick=\"CheckAll(this,'country','formUser')\"></td>";
}

Da notare che la chiamata, all'onclick, della funzione CheckAll, presenta tre parametri, ovvero
1. l'attributo "this"
2. nome del checkbox, "country"
3. nome del form, "FormUser"

Questo il codice della funzione

function CheckAll(check,prefix,form){
	var oForm=document.getElementById(form);
	for(var i=0;i < oForm.elements.length; i++){
		if(oForm[i].type=="checkbox"){
			  if(check.id.indexOf("_0")>-1){
				    if (check.checked){
				       	if(oForm.elements[i].name.indexOf(prefix)>-1){
				       		if(oForm.elements[i].name.indexOf("_0")>-1){
					        	oForm.elements[i].checked=true;
					        } else {
  					       		oForm.elements[i].disabled=true;
  					       		oForm.elements[i].checked=true;
  					       	}
				    	}
				   }else{
				       	if(oForm.elements[i].name.indexOf(prefix)>-1){
					       	oForm.elements[i].disabled=false;
   				            oForm.elements[i].checked=false;
				    	}
				   }
  			  }
		}
	}
}

Qualche spiegazione...

Il ciclo principale acquisisce tutti gli elementi del form, quindi anche altri eventuali valori di input. Per evitare cio', eseguo quindi una prima selezione, escludendo tutti quegli input che non sono di tipo checkbox. In questo modo pero' gli elementi selezionati saranno anche gli input presenti in altri checkbox.

Nella seguente istruzione, con "indexOf", cerco solo il checkbox "tutti" e eseguo la verifica se e' in stato check o meno. Nel caso cambio dallo stato uncheck a checked pongo tutti gli elementi in stato checked, escludendo tutti quegli elementi che non prensentano nel nome, il prefisso del checkbox stesso, in questo caso country.

Lo stesso ragionamento nel caso in cui disabilito il check su tutti.

Inoltre se abilito lo stato check per il checkbox "tutti", gli altri checkbox vengono disabilitati dal poter essere modificati, fino a quando quando tale opzione non si disabilita, ovvero il checkbox "tutti" e' false.

E' piu' semplice da vedere nella pratica che spiegarlo a parole.

Per altri dettagli potete fare riferimento al mio intervento sul forum di html.it, relativo a questo indirizzo web

http://forum.html.it/forum/showthread.php?s=6d54e699e678a0c328fecfd0e06045a5&postid=12924448#post12924448