Checkbox représente les cases à cocher.
Compatibilité


Disponibilité
Javascript 1.0 côté client
Correspondance HTML
<input...>
Héritage
Input et HTMLElement
Synopsis
form.elements[i]
form.name //une seule cas à cocher.
form.name[i] //un groupe de cas à cocher.
Propriétés
Propriété |
Description |
checked |
spécifie l'état de la case à cocher. |
defaultchecked |
la case à cocher est côchée par défaut. |
value |
valeur de la case à cocher. |
form |
spécifie le formulaire contenant la case à cocher. |
name |
correspond au nom de la case ou du groupe de cases à cocher. |
type |
correspond à l'attribut TYPE. |
Méthodes
Méthode |
Description |
blur |
enlève le focus sur la case à cocher. |
click |
simule un clique de souris sur la case à cocher. |
focus |
donne le focus à le case à cocher. |
handleEvent |
invoque le Handler pour spécifier un événement. |
Evénements
Evénement |
Description |
onBlur |
perte de focus de l'élément Checkbox. |
onClick |
clique de souris sur la case à cocher. |
onFocus |
réception de focus sur l'élément Checkbox. |
Exemple [voir]
<html>
<head>
<script language="JavaScript">
function controle_choix(i)
{
var choix = document.formulaire.cases;
if (i == 0)
{
if (choix[0].checked == true)
{
for (i = 1; i < choix.length; i++)
choix[i].checked = false;
}
}
else
{
if (choix[i].checked == true)
{
choix[0].checked = false;
}
}
}
</script>
</head>
<body>
Sélectionner les cases à cocher:
<form name="formulaire">
<input type="checkbox" name="cases" value="seule"
onclick="controle_choix(0)">Case à cocher unique
<br><br>
<input type="checkbox" name="cases" value="un"
onclick="controle_choix(1)">Premièr choix
<br>
<input type="checkbox" name="cases" value="deux"
onclick="controle_choix(2)">Second choix
<br>
<input type="checkbox" name="cases" value="trois"
onclick="controle_choix(3)">Troisième choix
<br>
<input type="checkbox" name="cases" value="quatre"
onclick="controle_choix(4)">Quatrième choix
<br>
<input type="checkbox" name="cases" value="cinq"
onclick="controle_choix(5)">Cinquième choix
<br>
</form>
</body>
</html> |
Exemple [voir]
<html>
<head>
<script language="javascript" type="text/javascript">
function change(code){
var valeur = document.form.champ.value;
if(valeur.search(code) != -1){
valeur = valeur.replace(' '+code+' ', '');
document.form.champ.value = valeur;
return false;
}
else{
document.form.champ.value += ' '+code+' ';
return true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="text" name="champ" size="50"><br>
<input type="checkbox" name="cocher" value="1"
onclick="change('Première valeur');" > Première valeur
<input type="checkbox" name="cocher" value="2"
onclick="change('Seconde valeur');"> Seconde valeur
<input type="checkbox" name="cocher" value="3"
onclick="change('Troisième valeur');"> Troisième valeur
</form>
</body>
</html> |
En savoir plus :

