L'Altruiste : Le Javascript

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 :