PDA

View Full Version : [Javascript] Lavorare sulle checkbox

Edde
02-02-2007, 15:44
Ciao :)



Allora, ho una form con una serie di checkbox.



Queste checkbox sono legate a variabili che fanno parte di un albero, ed io vorrei che se cliccassi su una mi si cliccassero automaticamente anche tutte quelle legate ai "figli".



In soldoni, ogni checkbox ha un nome del tipo (dove i nomi che vedete corrispondono alle etichette dei nodi dell'albero... Quindi Pippo_Topolino e Pippo_Topolino_Pluto si trovano sullo stesso ramo, ma la seconda ha un nodo in più):



1) Pippo_Topolino

2) Pippo_Topolino_Pluto

3) Pippo_Topolino_Pluto_Paperino



Se clicco sulla seconda, si deve cliccare anche la terza (Paperino è un figlio di Pluto)

Se clicco sulla prima si devono cliccare anche le altre due (Pluto è un figlio di Topolino, e Paperino è un figlio di Pluto)



Spero di non essere stato troppo contorto... :D



Mi sto spulciando la guida su html.it , ma se nel frattempo qualcuno riesce a darmi delle dritte (sono assolutamente a zero di javascript, ma conosco il java) glie ne sarei molto grato



"Ci sono tante cose da fare, e così poco tempo...." :muro:
dierre
02-02-2007, 15:58
fai un evento onClick che richiama una funzione che si preoccupa di checkare anche gli altri.
andbin
02-02-2007, 16:01
Prova questa pagina e dimmi se è quello che volevi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova selezione checkbox</title>
<script type="text/javascript">
<!--
function click_chkbox (chk)
{
var len = chk.name.length;

var elements = document.form1.elements;

for (var i = 0; i < elements.length; i++)
{
if (elements[i].name.substr (0, len) == chk.name)
elements[i].checked = chk.checked;
}
}
//-->
</script>
</head>
<body>

<form name="form1">
<input type="checkbox" onclick="click_chkbox(this)" name="uno">Checkbox 1
<br>
<input type="checkbox" onclick="click_chkbox(this)" name="uno_due">Checkbox 2
<br>
<input type="checkbox" onclick="click_chkbox(this)" name="uno_due_tre">Checkbox 3
<br>
<input type="checkbox" onclick="click_chkbox(this)" name="uno_due_tre_quattro">Checkbox 4
<br>
</form>

</body>
</html>
Edde
02-02-2007, 16:15
Prova questa pagina e dimmi se è quello che volevi:

Nella guida sono arrivato agli eventi, e ad occhio mi sembra quello che mi serve. Però non mi funziona... :confused:
andbin
02-02-2007, 16:28
Però non mi funziona... :confused:Cioè??? Cosa fa? Hai provato esattamente il mio codice? (che, preciso, l'ho testato su FF/IE/Opera)
Edde
02-02-2007, 16:35
Cioè??? Cosa fa? Hai provato esattamente il mio codice? (che, preciso, l'ho testato su FF/IE/Opera)

Improvvisamente ha cominciato a funzionare... :confused:

Non chiedermi il perchè... non ne ho la più pallida idea....

Lo avevo provato su ie e firefox, e non andava da nessuna delle due parti

E' quasi quello che mi serve (ma non è colpa tua, sono stato io poco chiato).

In realtà è possibile avere due checkbox:

Pippo_Topolino_Pluto
Pippo_Topolino_Pluto1

Con il tuo codice se clicco la prima clicca pure la seconda, ma in realtà Pluto e Pluto1 sono nodi diversi, quindi non lo dovrebbe fare.

Ora vedo se riesco a modificare il codice, intanto grazie :)
andbin
02-02-2007, 16:53
In realtà è possibile avere due checkbox:

Pippo_Topolino_Pluto
Pippo_Topolino_Pluto1

Con il tuo codice se clicco la prima clicca pure la seconda, ma in realtà Pluto e Pluto1 sono nodi diversi, quindi non lo dovrebbe fare.
Quindi, se ho capito bene, la regola è che se i due nomi hanno la stessa iniziale e differiscono solo per un numero alla fine, allora NON sono correlati. Giusto?

Prova con questa funzione:
function click_chkbox (chk)
{
var len = chk.name.length;

var elements = document.form1.elements;

var regex = new RegExp ("^\\d+$");

for (var i = 0; i < elements.length; i++)
{
var elem_name = elements[i].name;

if (elem_name.substr (0, len) == chk.name && !regex.test (elem_name.substr (len)))
elements[i].checked = chk.checked;
}
}
Edde
02-02-2007, 16:53
Non capisco... ho inserito il tuo codice in una jsp e mi da l'errore di prima...

Ti posto la pagina che ne viene fuori:

http://otakar.altervista.org/Varie/Extended_Objects_Properties.htm
andbin
02-02-2007, 16:58
Non capisco... ho inserito il tuo codice in una jsp e mi da l'errore di prima...Beh, ovvio, io nella mia pagina ho dato il nome 'form1' al <form> mentre nella tua pagina il form non ha nome.

Hai messo: <form action="Start" method="POST" >

Comunque prova il codice che ho postato appena prima ... dovrebbe risolvere la questione del numero finale. ;)
Edde
02-02-2007, 17:02
Quindi, se ho capito bene, la regola è che se i due nomi hanno la stessa iniziale e differiscono solo per un numero alla fine, allora NON sono correlati. Giusto?

Il secondo codice che mi hai mandato non va: infatti avendo le 4 ceckbox:

"uno"
"uno_due"
"uno_due_tre"
"uno_due_tre1"
"uno_due_tre_quattro"

Cliccando sulla prima non mi clicca la terza (mentre in realtà dovrebbe farlo).

Ho risolto così:




function click_chkbox (chk)
{
varr len = chk.name.length;
var elements = document.form1.elements;

for (var i = 0; i < elements.length; i++)
{
if (elements[i].name.substr (0, len+1) == chk.name+"_")
elements[i].checked = chk.checked;
}
}


Resta il problema sulla servlet
Edde
02-02-2007, 17:02
Beh, ovvio, io nella mia pagina ho dato il nome 'form1' al <form> mentre nella tua pagina il form non ha nome.

Hai messo: <form action="Start" method="POST" >

Comunque prova il codice che ho postato appena prima ... dovrebbe risolvere la questione del numero finale. ;)

Sono un cojonazzo... ora provo :D
Edde
02-02-2007, 17:15
C'era anche un altro errore (colpa mia).

Ti voglio bene :D

Grazie ancora ;)