Formulaire radio - Cours Javascript

Introduction

Info

Dans ce cours javascript, nous allons étudier les propriétés javascript de la balise HTML et XHTML <input type="radio">
La balise HTML et XHTML radio va vous permettre de proposer un ensemble de choix avec une seule possibilité de sélection.

Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :
- l'objet javascript Input du Document Object Model HTML (DOM HTML),
- la balise HTML XHTML INPUT
- les feuilles de style CSS

input type=radio

Changer la valeur

HTML :
Exemple de code :
<input type="radio" name="radio" value="radio">

XHTML :
Exemple de code :
<input type="radio" id="radio" value="radio" />


Vous pouvez changer la valeur de l'attribut HTML et XHTML "value" du bouton Radio HTML et XHTML.

Cliquer pour connaître la valeur initiale   Cliquez pour changer
Exemple de code :
<form name="r">
<input type="radio" name="dmc" value="radio">
<input type="radio" name="dmc" value="autre">

<a href = "javascript:alert(document.forms.r.dmc[0].value);"> valeur initiale </a>

<a href = "document.forms.r.dmc[0].value = 'cmd'; alert(document.forms.r.dmc[0].value)"> Change </a>

</form>

Sélectionner

Vous pouvez sélectionner le bouton Radio HTML et XHTML
  
Change
Exemple de code :
<form name="r">

<input type="checkbox" name="dmc">
<a href="#" onMouseOver = "document.forms.c.dmc.checked = true" onMouseOut = "document.forms.c.dmc.checked = false">Change</a>

</form>

Les événements

onBlur Quand on perd le focus d'un bouton Radio HTML et XHTML.
onClick Quand clique sur un bouton Radio HTML et XHTML.
onFocus Quand on prend le focus sur un bouton Radio HTML et XHTML.
Exemple de code :
<input type="checkbox" name="dmc" onclick="action()">

Les méthodes

blur() Enlève le focus d'un bouton Radio HTML et XHTML.
focus() Met le focus sur un bouton Radio HTML et XHTML.
click() Simule le clique sur un bouton Radio HTML et XHTML.
handleEvent() Gestion des événements.
Exemple de code :
document.forms.formulaire.radio[0].click();

Exercice

Exercice

Choix 1    Choix 2     Choix 3 
Choix 4     Choix 5     Choix 6 

Code

Exemple de code :
<form name="ee">

Choix 1 <input type="radio" name="dmc" value="radio">
Choix 2 <input type="radio" name="dmc" value="radio">
Choix 3 <input type="radio" name="dmc" value="radio">
Choix 4 <input type="radio" name="dmc" value="radio">
Choix 5 <input type="radio" name="dmc" value="radio">
Choix 6 <input type="radio" name="dmc" value="radio">

<input type="button" name="bout" value="Tester" onClick="teste()">

</form>


function teste() {
  var m=0;
  for (i=0;i<6;i++) {
    if (document.forms.ee.dmc[i].checked==true) {
      m=i;
      alert("C'est le choix "+Number(i+1)+" qui est sélectionné");
      break;
    }
  }
}
Chapitre formulaire textarea
Chapitre formulaire checkbox