L'Altruiste : Le Javascript

Radio représente une case radio dans un formulaire.

Compatibilité

Disponibilité

Javascript 1.0 côté client

Correspondance HTML

<input type="radio"...>

Héritage

Input et HTMLElement

Synopsis

form.elements[i]
form.name

Propriétés

Propriété	Description
checked	spécifie l'état de l'élément de saisie.
defaultchecked	la case à cocher est côchée par défaut (CHECKED).
form	spécifie le formulaire contenant l'élément de saisie.
name	correspond au nom de l'éléments de saisie (NAME).
type	correspond à l'attribut TYPE.
value	valeur de l'élément Radio (VALUE).

Méthodes

Méthode	Description
blur	enlève le focus sur l'élément de saisie.
click	simule un clique de souris sur l'élément de saisie.
focus	donne le focus à l'élément de saisie.
handleEvent	invoque le Handler pour spécifier un événement.

Evénements

Evénement	Description
onBlur	perte de focus de l'élément de saisie.
onChange	la valeur de l'élément de saisie change.
onFocus	réception de focus sur l'élément de saisie.

Exemple [voir]

<html>
  <head>
    <title>Démonstration de Radio</title>
    <script language="JavaScript">
      etat = 0;
      g = 0;
      args = new Array();
      noms = new Array();
      z = -1;
      if (document.images)
      {
        var selectionnee = new Image();
        selectionnee.src = "images/selection.gif";
        var deselectionnee = new Image();
        deselectionnee.src = "images/nonselection.gif";
      }
      function CreeRadio(nom, valeur, label, selection)
      {
        ok = false;
        inc = 0;
        if (document.images)
        {
          for (var i = 0; i < noms.length; i++)
          {
            if (noms[i] == nom)
            {
              ok = true;
              inc = i;
            }
          }
          if(ok == false)
          {
            ifhidden = '<input type="hidden" name="' + nom 
                     + '" value="' + valeur + '">';
            taille_noms = noms.length;
            args[taille_noms] = new Array();
            args[taille_noms][0] = new Array();
            args[taille_noms][0][0] = nom;
            args[taille_noms][0][1] = valeur;
            noms[noms.length] = nom;
          }
          else
          {
            ifhidden = "";
            taille_args = args[inc].length
            args[inc][taille_args] = new Array();
            args[inc][taille_args][0] = nom;
            args[inc][taille_args][1] = valeur;
          }
          if(selection==1)
          {
            image="images/selection.gif";
            attribut="CHECKED";
          }
          else
          {
            image="images/nonselection.gif";
            attribut="UNCHECKED";
          }
          arg_nom = "'" + nom + "'";
          arg_valeur = "'" + valeur + "'";
          document.write('<a href="javascript:changement(' + arg_nom + ', ' 
                     + arg_valeur + ', ' + etat + ')"><img src="' + image 
                     + '" name="' + valeur +'" border="0"></a>  ' 
                     + label + '<br>' + ifhidden);
          if(selection==1)
          {
            document.form.elements[nom].value = valeur;
          }
          etat++
        }
        else
        {
          browserver = navigator.userAgent;
          if (browserver.indexOf("Mozilla/2") != -1)
          {
            if(selection == 1)
            {
              attribut = "CHECKED";
            }
            else
            {
              attribut = "";
            }
            document.write('<input type="radio" name="' + nom + '" value="'
                       + valeur + '" ' + image + '>' + label + '<br>');
          }
        }
      }
      function changement(arg_nom , arg_valeur, arg_etat)
      {
        if(document.form.elements[arg_nom].value != arg_valeur)
        {
          for (i = 0; i < args.length; i++)
          {
            for (j = 0; j < args[i].length; j++)
            {
              if(args[i][j][0] == arg_nom)
              {
                document.images[args[i][j][1]].src = eval('deselectionnee.src');
              }
            }
          }
          document.images[arg_valeur].src = eval('selectionnee.src');
          document.form.elements[arg_nom].value = arg_valeur;
        }
      }
    </script>
  </head>
  <body>
    <form name="form">
      Sélectionner l'un des formats :<br><br>
      <script>
        CreeRadio("format", "Text", "Texte", 1) 
        CreeRadio("format", "HTML", "HTML", 0) 
        CreeRadio("format", "XML", "XML", 0) 
        CreeRadio("format", "CSS", "CSS", 0) 
        CreeRadio("format", "XSL", "XSL", 0) 
      </script>
    </form>
  </body>
</html>

En savoir plus :