Je voudrais savoir quelle diff=E9rence il peut y avoir entre un onChange =
et un onClick quand ils sont appliqu=E9s =E0 un input de type checkbox ou=
=20
radio button.
En clair, quelle est la meilleure solution entre :
<input type=3D"checkbox" name=3D"lenom" value=3D"123456" onChange=3D"fonc=
tion()">
et :
<input type=3D"checkbox" name=3D"lenom" value=3D"123456" onClick=3D"fonct=
ion()">
Je voudrais savoir quelle différence il peut y avoir entre un onChange et un onClick quand ils sont appliqués à un input de type checkbox ou radio button.
En clair, quelle est la meilleure solution entre : <input type="checkbox" name="lenom" value="123456" onChange="fonction()"> et : <input type="checkbox" name="lenom" value="123456" onClick="fonction()">
Merci d'avance pour vos conseils avisés
Pour un checkbox, il y a peu de différences puisqu'à chaque clic, on change la valeur de l'élément. Ainsi, un onClick surviendra chaque fois qu'on clique l'élément, c'est à dire en toute circonstance pour un checkbox ou un radio. Un onChange surviendra uniquement lorsque la valeur de l'élément change. c'est à dire à chaque clic sur une balise checkbox, mais pour un radio, uniquement si sa valeur était false. La manière la plus pertinante et plus logique dépend uniquement de vos intentions : voulez-vous appeler la fonction chaque fois que vous cliquez ou seulement lorsque la valeur change ? (ne prenez pas en compte l'équivalence impliquée uniquement dans le cas du checkbox pour ce raisonnement)
Bonjour
Je voudrais savoir quelle différence il peut y avoir entre un onChange
et un onClick quand ils sont appliqués à un input de type checkbox ou
radio button.
En clair, quelle est la meilleure solution entre :
<input type="checkbox" name="lenom" value="123456" onChange="fonction()">
et :
<input type="checkbox" name="lenom" value="123456" onClick="fonction()">
Merci d'avance pour vos conseils avisés
Pour un checkbox, il y a peu de différences puisqu'à chaque clic, on change
la valeur de l'élément. Ainsi, un onClick surviendra chaque fois qu'on
clique l'élément, c'est à dire en toute circonstance pour un checkbox ou un
radio.
Un onChange surviendra uniquement lorsque la valeur de l'élément change.
c'est à dire à chaque clic sur une balise checkbox, mais pour un radio,
uniquement si sa valeur était false.
La manière la plus pertinante et plus logique dépend uniquement de vos
intentions : voulez-vous appeler la fonction chaque fois que vous cliquez ou
seulement lorsque la valeur change ? (ne prenez pas en compte l'équivalence
impliquée uniquement dans le cas du checkbox pour ce raisonnement)
Je voudrais savoir quelle différence il peut y avoir entre un onChange et un onClick quand ils sont appliqués à un input de type checkbox ou radio button.
En clair, quelle est la meilleure solution entre : <input type="checkbox" name="lenom" value="123456" onChange="fonction()"> et : <input type="checkbox" name="lenom" value="123456" onClick="fonction()">
Merci d'avance pour vos conseils avisés
Pour un checkbox, il y a peu de différences puisqu'à chaque clic, on change la valeur de l'élément. Ainsi, un onClick surviendra chaque fois qu'on clique l'élément, c'est à dire en toute circonstance pour un checkbox ou un radio. Un onChange surviendra uniquement lorsque la valeur de l'élément change. c'est à dire à chaque clic sur une balise checkbox, mais pour un radio, uniquement si sa valeur était false. La manière la plus pertinante et plus logique dépend uniquement de vos intentions : voulez-vous appeler la fonction chaque fois que vous cliquez ou seulement lorsque la valeur change ? (ne prenez pas en compte l'équivalence impliquée uniquement dans le cas du checkbox pour ce raisonnement)
lann
Julien Plée wrote:
Pour un checkbox, il y a peu de différences puisqu'à chaque clic, o n change la valeur de l'élément. Ainsi, un onClick surviendra chaque fois qu 'on clique l'élément, c'est à dire en toute circonstance pour un chec kbox ou un radio. Un onChange surviendra uniquement lorsque la valeur de l'élément ch ange. c'est à dire à chaque clic sur une balise checkbox, mais pour un ra dio, uniquement si sa valeur était false. Je suis d'accord et c'est logique mais en fait ma question venait du
fait que ça n'a pas l'air de se passer comme ça avec au moins IE5 Mac (aussi bien en OS9 qu'en OSX), je n'ai pas pu faire le test sur PC. Selon mes tests (voir le script plus bas), avec du onClick tout se passe bien alors qu'avec onChange c'est comme si le script ne s'exécutait pas la première fois : premier clic sur un checkbox ou un radio - rien, clic sur un autre checkbox ou un autre radio - il se passe quelque chose. Je suppose que c'est encore une bizarrerie d'Explorer.
Mon script: (le principe est qu'il y a des checkboxes et des radio buttons mais que l'on ne peut cocher que l'un ou l'autre type d'input, la fonction raz() "déchecke" tous les checksboxes quand un bouton radio est sélectionné et inversement) <html> <head> <title>test</title> <script type="text/javascript"> <!-- function raz(x) { var i=0; var quoi=(x=='c')?'checkbox':'radio'; while (i<document.f1.elements.length) { if (document.f1.elements[i].type==quoi) { document.f1.elements[i].checkedúlse; } i++; } } //--> </script> </head> <body> <div> <form name="f1" action="test.htm.php" method="post"> <table cellspacing="0"> <tbody> <tr> <td rowspan="3" class="cP30"> <input type="checkbox" name="p30[]" value="1" onChange="raz('r ')">n°1 </td> <td class="cP10a"> <input type="radio" name="p10[]" value="1" onchange="raz('c')" >n°1 </td> </tr> <tr> <td class="cP10b actif"> <input type="radio" name="p10[]" value="2" onChange="raz('c')" >n°2 </td> </tr> <tr> <td class="cP10a"> <input type="radio" name="p10[]" value="3" onChange="raz('c')" >n°3 </td> </tr> </tbody> <tbody class="rang2"> <tr> <td rowspan="3" class="cP30 actif"> <input type="checkbox" name="p30[]" value="2" onChange="raz('r ')">n°2 </td> <td class="cP10a achete"> <input type="radio" name="p10[]" value="4" onChange="raz('c')" >n°4 </td> </tr> <tr> <td class="cP10b"> <input type="radio" name="p10[]" value="5" onChange="raz('c')" >n°5 </td> </tr> <tr> <td class="cP10a"> <input type="radio" name="p10[]" value="6" onChange="raz('c')" >n°6 </td> </tr> </tbody> </table> </form> </div> </body> </html>
Julien Plée wrote:
Pour un checkbox, il y a peu de différences puisqu'à chaque clic, o n change
la valeur de l'élément. Ainsi, un onClick surviendra chaque fois qu 'on
clique l'élément, c'est à dire en toute circonstance pour un chec kbox ou un
radio.
Un onChange surviendra uniquement lorsque la valeur de l'élément ch ange.
c'est à dire à chaque clic sur une balise checkbox, mais pour un ra dio,
uniquement si sa valeur était false.
Je suis d'accord et c'est logique mais en fait ma question venait du
fait que ça n'a pas l'air de se passer comme ça avec au moins IE5 Mac
(aussi bien en OS9 qu'en OSX), je n'ai pas pu faire le test sur PC.
Selon mes tests (voir le script plus bas), avec du onClick tout se passe
bien alors qu'avec onChange c'est comme si le script ne s'exécutait
pas la première fois : premier clic sur un checkbox ou un radio - rien,
clic sur un autre checkbox ou un autre radio - il se passe quelque chose.
Je suppose que c'est encore une bizarrerie d'Explorer.
Mon script:
(le principe est qu'il y a des checkboxes et des radio buttons mais que
l'on ne peut cocher que l'un ou l'autre type d'input, la fonction raz()
"déchecke" tous les checksboxes quand un bouton radio est sélectionné et
inversement)
<html>
<head>
<title>test</title> <script type="text/javascript">
<!--
function raz(x) {
var i=0;
var quoi=(x=='c')?'checkbox':'radio';
while (i<document.f1.elements.length) {
if (document.f1.elements[i].type==quoi) {
document.f1.elements[i].checked=false;
}
i++;
}
}
//-->
</script>
</head>
<body>
<div>
<form name="f1" action="test.htm.php" method="post">
<table cellspacing="0">
<tbody>
<tr>
<td rowspan="3" class="cP30">
<input type="checkbox" name="p30[]" value="1" onChange="raz('r ')">n°1
</td>
<td class="cP10a">
<input type="radio" name="p10[]" value="1" onchange="raz('c')" >n°1
</td>
</tr>
<tr>
<td class="cP10b actif">
<input type="radio" name="p10[]" value="2" onChange="raz('c')" >n°2
</td>
</tr>
<tr>
<td class="cP10a">
<input type="radio" name="p10[]" value="3" onChange="raz('c')" >n°3
</td>
</tr>
</tbody>
<tbody class="rang2">
<tr>
<td rowspan="3" class="cP30 actif">
<input type="checkbox" name="p30[]" value="2" onChange="raz('r ')">n°2
</td>
<td class="cP10a achete">
<input type="radio" name="p10[]" value="4" onChange="raz('c')" >n°4
</td>
</tr>
<tr>
<td class="cP10b">
<input type="radio" name="p10[]" value="5" onChange="raz('c')" >n°5
</td>
</tr>
<tr>
<td class="cP10a">
<input type="radio" name="p10[]" value="6" onChange="raz('c')" >n°6
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Pour un checkbox, il y a peu de différences puisqu'à chaque clic, o n change la valeur de l'élément. Ainsi, un onClick surviendra chaque fois qu 'on clique l'élément, c'est à dire en toute circonstance pour un chec kbox ou un radio. Un onChange surviendra uniquement lorsque la valeur de l'élément ch ange. c'est à dire à chaque clic sur une balise checkbox, mais pour un ra dio, uniquement si sa valeur était false. Je suis d'accord et c'est logique mais en fait ma question venait du
fait que ça n'a pas l'air de se passer comme ça avec au moins IE5 Mac (aussi bien en OS9 qu'en OSX), je n'ai pas pu faire le test sur PC. Selon mes tests (voir le script plus bas), avec du onClick tout se passe bien alors qu'avec onChange c'est comme si le script ne s'exécutait pas la première fois : premier clic sur un checkbox ou un radio - rien, clic sur un autre checkbox ou un autre radio - il se passe quelque chose. Je suppose que c'est encore une bizarrerie d'Explorer.
Mon script: (le principe est qu'il y a des checkboxes et des radio buttons mais que l'on ne peut cocher que l'un ou l'autre type d'input, la fonction raz() "déchecke" tous les checksboxes quand un bouton radio est sélectionné et inversement) <html> <head> <title>test</title> <script type="text/javascript"> <!-- function raz(x) { var i=0; var quoi=(x=='c')?'checkbox':'radio'; while (i<document.f1.elements.length) { if (document.f1.elements[i].type==quoi) { document.f1.elements[i].checkedúlse; } i++; } } //--> </script> </head> <body> <div> <form name="f1" action="test.htm.php" method="post"> <table cellspacing="0"> <tbody> <tr> <td rowspan="3" class="cP30"> <input type="checkbox" name="p30[]" value="1" onChange="raz('r ')">n°1 </td> <td class="cP10a"> <input type="radio" name="p10[]" value="1" onchange="raz('c')" >n°1 </td> </tr> <tr> <td class="cP10b actif"> <input type="radio" name="p10[]" value="2" onChange="raz('c')" >n°2 </td> </tr> <tr> <td class="cP10a"> <input type="radio" name="p10[]" value="3" onChange="raz('c')" >n°3 </td> </tr> </tbody> <tbody class="rang2"> <tr> <td rowspan="3" class="cP30 actif"> <input type="checkbox" name="p30[]" value="2" onChange="raz('r ')">n°2 </td> <td class="cP10a achete"> <input type="radio" name="p10[]" value="4" onChange="raz('c')" >n°4 </td> </tr> <tr> <td class="cP10b"> <input type="radio" name="p10[]" value="5" onChange="raz('c')" >n°5 </td> </tr> <tr> <td class="cP10a"> <input type="radio" name="p10[]" value="6" onChange="raz('c')" >n°6 </td> </tr> </tbody> </table> </form> </div> </body> </html>
