Formulaire checkbox - Cours Javascript

Introduction

Info

Nous allons étudier les propriétés Javascript de la balise HTML et XHTML <input type="checkbox">.
La balise HTML et XHTML checkbox est une case que l'on peut cocher ou décocher.

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=checkbox

Changer la valeur

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

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


Vous pouvez changer la valeur de l'attribut HTML et XHTML "value" de la case à cocher Chekbox.

Par exemple :
 Cliquez pour connaître la valeur initiale
cliquez pour changer
Exemple de code :
<form name="c">

<input type="checkbox" name="dmc" value="checkbox">
<a href = "alert(document.forms.c.dmc.value);"> valeur initiale< /a>

<a href="document.forms.c.dmc.value='cmd'; alert(document.forms.c.dmc.value)"> Change< /a>

</form>

Sélectionner

Vous pouvez sélectionner un case à cocher Chekbox

Par exemple :

Passez la souris sur ce lien
Exemple de code :
<form name="c">

<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 de la case à cocher Chekbox.
onClick Quand on clique sur la case à cocher Chekbox.
onFocus Quand on prend le focus sur la case à cocher Chekbox.
Exemple de code :
<input type="checkbox" name="dmc" onclick="action()">

Les méthodes

blur() Enlève le focus sur la case à cocher Chekboxfocus() Met le focus sur la case à cocher Chekbox
click() Simule un clique sur la case à cocher Chekbox
handleEvent() Gestion des événements.
Exemple de code :
document.forms.formulaire.checkbox.click();

Exercice

Exercice

Imaginons qui nous devons faire 3 choix minimum.
Choix 1    Choix 2     Choix 3 
Choix 4     Choix 5     Choix 6 

Code

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

Choix 1 <input type="checkbox" name="checkbox1" value="checkbox">
Choix 2 <input type="checkbox" name="checkbox2" value="checkbox">
Choix 3 <input type="checkbox" name="checkbox3" value="checkbox">
Choix 4 <input type="checkbox" name="checkbox4" value="checkbox">
Choix 5 <input type="checkbox" name="checkbox5" value="checkbox">
Choix 6 <input type="checkbox"> name="checkbox6" value="checkbox">

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

</form>

function test() {
  var m=0;
  for (i=1;i<7;i++) {
  if (eval("document.forms.e.checkbox"+i+".checked == true")){
  m=m+1;
  }
  }
  if (m>=3) {
    alert("Vous avez fait 3 choix ou plus");
  }else {
    alert("Vous devez cocher 3 choix ou plus");
  }
}
Chapitre formulaire radio
Chapitre formulaire select