visualizzare valori alla selezione di checkbox?

[the-bit]

Buongiorno e Buon Natale a tutti,
vorrei sapere come fare, magari in ajax o jquery, a far si che quando selezioni alcuni checkbox all'interno di un form mi vengano visualizzati i valori di ogni checkbox affianco ad ogni campo e in più che mi venga visualizzata la somma di ogni valore "checcato" a fondo pagina.

Grazie.

[cavicchiandrea]

Anche a te.
A che punto sei arrivato? Già usi Jquery? (sei hai provato a vedere in giro?)
Posta la pagina come la riceve il browser (no codice php) oppure un link alla pagina pubblica.

[the-bit]

Ciao,
avevo intenzione di usare jQuery o Ajax perchè sono piu intuitivi e magari si deve scrivere meno codice.
La mia pagina php è strutturata in questo modo:

        <form name="checkboxes" id="checkboxes" method="POST" action="elabora.php">
            <fieldset>
                <input type="checkbox" name="checkbox[1]" id="checkbox1" value="100" />Campo 1

                <input type="checkbox" name="checkbox[2]" id="checkbox2" value="200" />Campo2

                <input type="checkbox" name="checkbox[3]" id="checkbox3" value="300" />Campo3

                <input type="checkbox" name="checkbox[4]" id="checkbox4" value="400" />Campo4

                <input type="submit" value="Aggiungi" />
            </fieldset>
</form> 

Avevo trovato questa discussione http://forum.html.it/forum/showthrea...readid=1252528 ma non so se si presta a quello che voglio realizzare io.
Mi sembra fatto in JS e basta senza utilizzo di framework come jQuery o ajax e perciò volevo sapere come fare a realizzare questo genere di form dinamico. Magari scrivendo una sola funzione in cui ci passo il nome del campo e quindi non va altro che a confrontare il valore (se è ceccato) e ne visualizza il valore.

[TrueLies]

Tipo questo?

<form name="checkboxes" id="checkboxes" method="POST" action="elabora.php"> 
                <input type="checkbox" name="checkbox[1]" id="checkbox1" value="100" />Campo 1

                <input type="checkbox" name="checkbox[2]" id="checkbox2" value="200" />Campo2

                <input type="checkbox" name="checkbox[3]" id="checkbox3" value="300" />Campo3

                <input type="checkbox" name="checkbox[4]" id="checkbox4" value="400" />Campo4

                <input type="submit" value="Aggiungi" />
</form>

CLICCA PER TESTARE

<script>

function boh(){
var wrapper=document.getElementById('checkboxes');//è l' id della form
window['checkflaggati']=[]; window['tuttiicheck']=[]; window['sommacheck']=0;/*variabli globali, più semplice per te, forse*/ 
for(var i=0, e=wrapper.getElementsByTagName('INPUT'); i<e.length; i++){
	if(e[i].type=="checkbox"){
	window['tuttiicheck'][++window['tuttiicheck'].length-1]=e[i].value;/*io uso ++length-1, concettualmente più giusto*/
		if(e[i].checked){
		window['checkflaggati'][++window['checkflaggati'].length-1]=e[i].value;
		window['sommacheck']+=parseInt(e[i].value);
		};
	};
}
}

</script>

[the-bit]

Ciao e grazie, innanzitutto, per la disponibilità.
Purtroppo, però, non è esattamente quello che cercavo perchè quello che cercavo io (per questo mi sarebbe piaciuto usare un framework dinamico come ajax o jQuery) era che ogni volta che l'utente ceccava un checkbox appariva affianco di ogni campo una div col valore e man mano la somma veniva incrementata in una div a parte.

Spero sia fattibile.

[TrueLies]

la funzione ti riporta i valori, poi puoi stamparli dove ti pare quando ti pare. Crei dei DIV o span immediatamente a CONTATTO con le input (senza spazi o ritorni a capo di mezzo), e assegni i valori della input al nextSibling con innerHTML

<form name="checkboxes" id="checkboxes" method="POST" action="elabora.php" style="display:block"> 
                <input type="checkbox" name="checkbox[1]" id="checkbox1" value="100" onclick="this.nextSibling.innerHTML=(this.checked)?this.value:'Campo 1'; boh()" /><span>Campo 1</span>

                <input type="checkbox" name="checkbox[2]" id="checkbox2" value="200" onclick="this.nextSibling.innerHTML=(this.checked)?this.value:'Campo 2'; boh()" /><span>Campo 2</span>

                <input type="checkbox" name="checkbox[3]" id="checkbox3" value="300" onclick="this.nextSibling.innerHTML=(this.checked)?this.value:'Campo 3'; boh()" /><span>Campo 3</span>

                <input type="checkbox" name="checkbox[4]" id="checkbox4" value="400" onclick="this.nextSibling.innerHTML=(this.checked)?this.value:'Campo 4'; boh()" /><span>Campo 4</span>

				<div id="somma">Totale</div>
                <input type="submit" value="Aggiungi" />
</form>

CLICCA PER TESTARE

<script>

function boh(){
var wrapper=document.getElementById('checkboxes');//è l' id della form
window['checkflaggati']=[]; window['tuttiicheck']=[]; window['sommacheck']=0;/*variabli globali, più semplice per te, forse*/ 
for(var i=0, e=wrapper.getElementsByTagName('INPUT'); i<e.length; i++){
	if(e[i].type=="checkbox"){
	window['tuttiicheck'][++window['tuttiicheck'].length-1]=e[i].value;/*io uso ++length-1, concettualmente più giusto*/
		if(e[i].checked){
		window['checkflaggati'][++window['checkflaggati'].length-1]=e[i].value;
		window['sommacheck']+=parseInt(e[i].value);
		};
	};
}
document.getElementById('somma').innerHTML=window['sommacheck'];
}

</script>

[the-bit]

Mi spiace ma trovo molto difficile questo script...tant'è che nemmeno mi funziona.
Non esiste qualcosa in ajax o jquery?

[TrueLies]

Lo script funziona - se vuoi passare ad ajax o a jquery non rendi affatto le cose più facili: è impossibile essere più facili che impiegando il javascript nativo piuttosto che i metalinguaggi come jquery.

Ajax non c'entra nulla con quel che vuoi fare (almeno per come lo hai descritto): aggiornare un campo sul lato del client in base a valori selezionati su checkbox che per definizione stanno sul lato del client, e farlo anzichè sul client tramite ajax, che necessariamente invoca il server, significa complessificare considerevolmente una cosa semplice da svolgersi sul lato del client piuttosto che semplificarla.

Comunque ripeto, lo script funziona: gli alert visualizzano i dati attesi, la somma viene effettuata e aggiornata. Probabilmente non riesci ad implementarlo ma non saprei come aiutarti più che fornendoti i codici e l' html di verifica.