[js] Casella di controllo con sottrazione punti

Salve a tutti!

Mi dispiace per il titolo troppo vago, ma non sono riuscito a pensarne uno migliore...

Devo creare un sito per il fantacalcio e vorrei che nella pagina per selezionare la rosa, si possano vedere i crediti diminuire automaticamente.

Cioè io ho una situazione del genere:
__________________________________________________ _

( con "O" indico la casella di controllo /check )

Crediti: 300

O Buffon - costo 10
O Toldo - costo 23
O Peruzzi - costo 16

Vorrei fare in modo che checkando sulla casella, diminuiscano in modo automatico i crediti.
__________________________________________________ _

Spero di aver spiegato bene il mio problema...

Grazie in anticipo ;)


Ho editato il titolo e spostasto di sezione.

[Ospite]

per fare questo è necessario l'uso di javascript, con php non riesci a farlo in tempo reale ma ti serve un refresh della pagina...

non so di preciso come si faccia, visto che col js non sono molto pratico, di sicuro passerà di qui uno più esperto di me...

[Ospite]

<script type="text/javascript">var punti=300;

function scala(da_scalare){
punti=punti-da_scalare;
document.getElementById('punti').innerHTML= punti;
}
</script>Crediti:<div id="punti">300</div>

<input type="radio" name="nome" value="buffon" onclick="scala(10);"/> Buffon - costo 10
<input type="radio" name="nome" value="toldo" onclick="scala(23);"/> Toldo - costo 23
<input type="radio" name="nome" value="peruzzi" onclick="scala(16);"/> Peruzzi - costo 16

<script type="text/javascript">var punti=300;

function scala(da_scalare){
punti=punti-da_scalare;
document.getElementById('punti').innerHTML= punti;
}
</script>Crediti:<div id="punti">300</div>

<input type="radio" name="nome" value="buffon" onclick="scala(10);"/> Buffon - costo 10
<input type="radio" name="nome" value="toldo" onclick="scala(23);"/> Toldo - costo 23
<input type="radio" name="nome" value="peruzzi" onclick="scala(16);"/> Peruzzi - costo 16

Ottimo!

Ma ci sono un paio di cosucce...

A me servirebbe il checkbox, che posso semplicemente usare sostituendo il tipo.

Poi vorrei che quando clicco su Buffon, mi toglie 10 crediti, ma se ci ripremo, mi devono ritornare...

Ho provato a risolvere facendo in questo modo:
__________________________________________________ _______

function scala(da_scalare){
if(document.rosa.GIOCATORE.checked)
{
punti=punti-da_scalare;
document.getElementById('punti').innerHTML= punti;
}
else
{
punti=punti+da_scalare;
document.getElementById('punti').innerHTML= punti;
}
}
__________________________________________________ _____

In questo modo, come faccio ad utilizzare questa funzione per tutti gli elementi?

Dovrei sostituire al posto di GIOCATORE uno di questi:
es.: Portiere1, Portiere2, Portiere3.

Mi ritrovo quindi con una serie di checkbox del tipo:

<input onclick="scala(10);" type="checkbox" name="Portiere1" value="10"> Buffon - costo 10
<input onclick="scala(23);" type="checkbox" name="Portiere2" value="23"> Toldo - costo 23
<input onclick="scala(16);" type="checkbox" name="Portiere3" value="16"> Peruzzi - costo 16

Grazie ancora.

function scala(giocatore, da_scalare){
if(giocatore.checked)
{
punti=punti-da_scalare;
document.getElementById('punti').innerHTML= punti;
}
else
{
punti=punti+da_scalare;
document.getElementById('punti').innerHTML= punti;
}
}

prova questo

Ciaooo!

function scala(giocatore, da_scalare){
if(giocatore.checked)
{
punti=punti-da_scalare;
document.getElementById('punti').innerHTML= punti;
}
else
{
punti=punti+da_scalare;
document.getElementById('punti').innerHTML= punti;
}
}

prova questo

Ciaooo!

Ottima soluzione!!

Grazie a tutti per i consigli :D

Riscrivo il risultato finale per chi ricercherà questo topic:

__________________________________________________ _________

<script type="text/javascript">var punti=300;

function scala(giocatore, da_scalare){
if(giocatore.checked)
{
punti=punti-da_scalare;
document.getElementById('punti').innerHTML= punti;
}
else
{
punti=punti+da_scalare;
document.getElementById('punti').innerHTML= punti;
}
}
</script>


<input onclick="scala(Portiere1, 10);" type="checkbox" name="Portiere1" value="10"> Buffon - costo 10
<input onclick="scala(Portiere2, 23);" type="checkbox" name="Portiere2" value="23"> Toldo - costo 23
<input onclick="scala(16);" type="checkbox" name="Portiere3" value="16"> Peruzzi - costo 16