Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. jQuery
  3. Les formulaires
Extrait - jQuery Le framework JavaScript pour des sites dynamiques et interactifs (4e édition)
Extraits du livre
jQuery Le framework JavaScript pour des sites dynamiques et interactifs (4e édition) Revenir à la page d'achat du livre

Les formulaires

Introduction

Même si jQuery n’apporte rien de spécifiquement nouveau en la matière, nous consacrons un chapitre aux formulaires car ils représentent toujours un développement particulier dans l’élaboration des sites web.

Les sélecteurs de formulaires

:input

Sélectionne tous les éléments de formulaires (input, textarea, select et boutons).

:text

Sélectionne tous les éléments de formulaires de type ligne de texte.

:password

Sélectionne tous les éléments de formulaires de type mot de passe.

:radio

Sélectionne tous les éléments de formulaires de type bouton radio. 

:checkbox

Sélectionne tous les éléments de formulaires de type bouton de case à cocher.

:submit

Sélectionne tous les éléments de formulaires de type submit.

:image

Sélectionne tous les éléments de formulaires de type image.

:reset

Sélectionne tous les éléments de formulaires de type reset.

:button

Sélectionne toutes les balises <button> et tous les éléments de formulaires de type button.

:file

Sélectionne tous les éléments de formulaires de type fichier.

:hidden

Sélectionne tous les éléments de formulaires de type hidden.

:focus

Sélectionne l’élément de formulaires qui possède le focus. Introduit à partir de la version 1.6 de jQuery.

:enabled

Sélectionne tous les éléments qui sont activés.

:disabled

Sélectionne tous les éléments qui sont désactivés.

:checked

Retient tous les éléments...

Les filtres de sélection

1. Les éléments cochés

:checked

Sélectionne tous les éléments de type bouton radio ou case à cocher qui sont cochés.

Exemple

Retrouvons au clic du bouton, les cases à cocher qui sont cochées. 

Affichage initial :

images/C12-004.png

Affichage avec la sélection des cases cochées :

images/C12-005.png

Le fichier HTML :


<!doctype html> 
<html lang="fr"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
        $(":button").on("click",function(){ 
            $("input:checked").parent().css({"background": "#9cf"}); 
        }); 
    });           
</script> 
</head> 
<body> 
<form action=""> 
    <p><input type="checkbox" name="box" checked> Choix 1</p> 
    <p><input type="checkbox" name="box"> Choix 2</p> 
    <p><input...

Applications

1. Sélectionner toutes les cases à cocher

Très en vogue sur les sites récents, ce script offre la possibilité à l’utilisateur d’activer toutes les cases à cocher en une seule action.

Affichage initial :

images/C12-008.png

Affichage obtenu après avoir coché l’option Sélectionner tout :

images/C12-009.png

Le document HTML :


<!doctype html> 
<html lang="fr"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
        $("#tous").click(function(){ 
            var checked_status = this.checked; 
            $("input[name=case]").each(function(){ 
                this.checked = checked_status; 
            }); 
        });                     
    }); 
</script> 
</head> 
<body> 
<p>La librairie jQuery est :<br></p> 
<p><input type="checkbox" name="case">Concise</p> 
<p><input type="checkbox" name="case">Souple</p> 
<p><input type="checkbox" name="case">Compacte</p> 
<p><input type="checkbox" name="case">Rapide</p> 
<p><input type="checkbox" name="case">Compatible</p> 
<hr> 
<p><input type="checkbox" id="tous"><strong>Sélectionner tout</strong></p> 
</body> 
</html>
 

Le fichier à télécharger est C12-4.1.html.

Le script jQuery :


$(document).ready(function(){ 
    $("#tous").click(function(){
 

Initialisation de jQuery, et au clic de la case à cocher permettant de sélectionner...