Checkbox représente les cases à cocher.

Compatibilité
Cet objet est compatible avec Internet Explorer.Cet objet est compatible avec Netscape.
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 :
Découvrez cet objet sur le site de NetscapeDécouvrez cet objet sur le site de Microsoft