jQuery Les sélecteurs des éléments de formulaire

Définition et Usage éléments de formulaire

jQuery cours tutorial

Dans jQuery les éléments de formulaires peuvent être sélectionnés grâce aux sélecteurs qui suivent :

Nous allons voir les éléments de formulaires suivants :

Sélecteur :button Sélectionne tous les éléments bouton et/ou tous les éléments de type bouton.
Sélecteur :checkbox Sélectionne tous les éléments de type checkbox.
Sélecteur :checked Sélectionne tous les éléments de type checkbox qui sont cochés
Sélecteur :disabled Sélectionne tous les éléments qui sont désactivées.
Sélecteur :enabled Sélectionne tous les éléments qui sont activées.
Sélecteur :file Sélectionne tous les éléments de type file
Sélecteur :focus Sélectionne l'élément s’il a le focus actuellement.
Sélecteur :image Sélectionne tous les éléments de type image
Sélecteur :input Sélectionne tous les éléments input, textarea, et bouton.
Sélecteur :password Sélectionne tous les éléments de type password (mot de passe) .
Sélecteur :radio Sélectionne tous les éléments de type radio.
Sélecteur :reset Sélectionne tous les éléments de type reset.
Sélecteur :selected Sélectionne tous les éléments sélectionnés.
Sélecteur :submit Sélectionne tous les éléments de type submit
Sélecteur :text Sélectionne tous les éléments de type text

Le sélecteur :button

Description : Sélectionne tous les éléments bouton et tous les éléments de type button.

Syntaxe

$(":button") ;

Exemple : Trouver le nombre de boutons dans le formulaire

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
   <title>jQuery les seleceurs éléments de formulaire  </title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
    var input = $(":button").css({background:"yellow",
border:"3px red solid"});
    $("div").text("Pour ce type  jQuery a trouvé " + input.length
+ " boutons.")
            .css("color", "#ff0000");
    $("form").submit(function () { return false; });
});
</script>
</head>
<body>
 <center> <form>
    <input type="button" value="Input Bouton"/><br
/><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br /><br />
    <input type="file" /><br />
    <input type="hidden" /><br />
    <input type="image" /><br />
    <input type="password" /><br />
    <input type="radio" /><br />
    <input type="text" /><br /><br />
   
<select><option>Option<option/></select><br
/><br />
    <textarea></textarea><br /><br
/>
    <input type="reset" />
    <input type="submit" />
    <button>Bouton</button>
  </form>
  <div>
  </div>
  </center>
</body>
</html>

Haut de la page

Le sélecteur : checkbox

Description :Lesélecteur : checkbox sélectionne tous les éléments de type checkbox.

Note :

$(':checkbox') est équivalent à $('[type=checkbox]'). Comme pour les autres sélecteurs de pseudo-classe (ceux qui commencent par un ":") il est recommandé de les faire précéder d'un nom de balise ou autre sélecteur ; sinon, le sélecteur universel ("*") est utilisé implicitement. En d'autres termes, le $(':checkbox') est équivalent à $('*:checkbox'), afin de $('input:checkbox') doit être utilisé à la place..

Syntaxe

$('input:checkbox')

Exemple : Trouver le nombre de case à cocher dans le formulaire

Sélectionner le code


  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo </title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){function countChecked() {
    var n = $("input:checked").length;
    $("div").text(n + (n <= 1 ? " case est" : " cases sont") + "
  cochée" + (n > 1 ? "s!" : "!")).css("color", "#ff0000");
  }
  countChecked();
  $(":checkbox").click(countChecked);
  });
  </script>
  </head>
  <body>
    <center>
  <form>
    <p>
      <input type="checkbox" name="newsletter" checked="checked"
  value="Hourly" />
  
      <input type="checkbox" name="newsletter" value="Daily"
  />
      <input type="checkbox" name="newsletter" value="Weekly"
  />
  
      <input type="checkbox" name="newsletter" checked="checked"
  value="Monthly" />
      <input type="checkbox" name="newsletter" value="Yearly"
  />
    </p>
  </form>
  <div></div>
  </center>
  <script>
  
  </script>
  
  </body>
  </html>

Haut de la page

Le sélecteur : checked

Description : Le sélecteur : checked séléctionne tous les éléments cases à cocher qui sont cochés.

Le sélecteur : checked est utilisé pour les cases à cocher et les boutons radio.

Syntaxe

$(":checked")

Exemple 1: trouve toutes les case à cocher qui sont cochées

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n <= 1 ? " case est" : " cases sont") + "
cochée" + (n > 1 ? "s!" : "!"));
}
countChecked();
$(":checkbox").click(countChecked);
});
</script>
</head>
<body>
  <center>
<form>
  <p>
    <input type="checkbox" name="newsletter" checked="checked"
value="Hourly" />

    <input type="checkbox" name="newsletter" value="Daily"
/>
    <input type="checkbox" name="newsletter" value="Weekly"
/>

    <input type="checkbox" name="newsletter" checked="checked"
value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly"
/>
  </p>
</form>
<div></div>
</center>
</body>
</html>

Haut de la page

Exemple :

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
$("input").click(function() {
  $("#log").html( "L'option " + $(":checked").val() + " est
sélectionée!" );
});
});
</script>
</head>
<body>
 <center>
<form>
  <div>
    <input type="radio" name="fruit" value="orange"
id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="pommme"
id="pommme">
    <label for="pommme">pommme</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banane"
id="banane">
    <label for="banane">banane</label>
  </div>
  <div id="log"></div>
</form>
</center>
</body>
</html>

Haut de la page

Le sélecteur :disabled

Syntaxe

$("input:disabled")

Description : Le sélecteur :disabled sélectionne tous les éléments qui sont désactivées.

Note : Comme pour les autres sélecteurs de pseudo-classe (ceux qui commencent par un ":") si vous ne faites pas précéder d'un nom de balise ou quelque autre sélecteur (comme ceci par exemple : $('input:disabled') ) le sélecteur universel ("*") est implicitement utilisé. En d'autres termes, le $(':disabled') est équivalent à $('*:disabled') .

Exemple :

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
$("input:disabled").val("Ce champ est désactivé ");
});
</script>
</head>
<body>
  <center><form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
</center>
</body>
</html>

Haut de la page

Le sélecteur :enabled

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

Syntaxe

$("input:enabled")

Exemple :

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
$("input:enabled").val("Ce champ est activé ");
$("input:disabled").val("Ce champ est désactivé ");
});
</script>
</head>
<body>
 <center> <form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
</center>

</body>
</html>

Haut de la page

Le sélecteur :file

Description : le sélecteur :file Sélectionne tous les éléments de type = " file".

Syntaxe

$("input:file") ;

Exemple : Retrouve tous les intrants de fichier.

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
var input = $("input:file").css({background:"yellow", border:"2px
#ff0000 solid"});
    $("div").text("jQuery a trouvé " + input.length + "de type
file.")
            .css("color", "#ff0000");
    $("form").submit(function () { return false; });
});
</script>
</head>
<body>
 <center> <form>
    <fieldset>
   <input type="button" value="Input Button"/><br
/>
    <input type="checkbox" /><br />

    <input type="file" /><br />
    <input type="hidden" /><br />
    <input type="image" /><br />

    <input type="password" /><br />
    <input type="radio" /><br /><br />
    <input type="text" />
   
<select><option>Option<option/></select><br
/><br />
    <textarea></textarea><br /><br />
    <button>Bouton</button>&nbsp;&nbsp;
    <input type="reset" />&nbsp;&nbsp;
    <input type="submit" /><br />
    </fieldset>   
  </form>
  <div>
  </div>
</center>
</body>
</html>

Haut de la page

Le sélecteur :focus

Description : Le sélecteur :focus sélectionne l'élément s’il a le focus actuellement.

Syntaxe

$(':focus') ;

Exemple : Ajoute la classe ciblée à l’élément qui a le focus Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
$( "#content" ).delegate( "*", "focus blur", function( event )
{
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});
});
</script>
<style>
.focused {
    background: #eeaa55;
}
</style>

</head>
<body>
<center> 
<div id="content">
    <input tabIndex="1"><br /><br />
    <input tabIndex="2"><br /><br />
    <select tabIndex="3"><br /><br />
        <option>select menu</option><br /><br
/>
    </select><br /><br />
    <div tabIndex="4">
       Un div
    </div>
</div>
</center>
</body>
</html>

Haut de la page

Le sélecteur :image

Description : Le sélecteur :imageSélectionne tous les éléments de type image.

:image est équivalent à [type="image"]

Syntaxe

$( ':image') ;

Exemple :

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
 var input = $("input:image").css({border:"2px #00dd00
solid"});
    $("div").text("JQuery a trouvé " + input.length + " élément de
ce type .")
            .css("color", "red");
    $("form").submit(function () { return false; });
});
</script>
  <style>
  textarea { height:45px; }
  </style>
 
</head>
<body>
  <center><form>
 
    <input type="file" /><br /><br />
    <input type="image"
src="http://www.oujood.com/images/apprendre.png"/
width="100" ><br /><br />
    <input type="password" /><br /><br />
    <input type="radio" /><br /><br />
 
    <input type="text" /><br /><br />
       
    <textarea></textarea><br />
    <input type="reset" />&nbsp;<input type="submit"
value="valider"/>
  </form><br /><br />
  <div>
  </div></center>
</body>
</html>

Haut de la page

Le sélecteur :input

Description :Le sélecteur :input sélectionne tous les contrôles d’un formulaire.

Syntaxe

$( :input)

Exemple :

Sélectionner le code


<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script type="text/javascript"
src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
 var allInputs = $(":input");
    var formChildren = $("form > *").css({border:"2px #00dd00
solid"});
    $("#messages").text(allInputs.length + " inputs trouvés dans ce
formulaire et " + formChildren.length + " enfants.");
    $("form").submit(function () { return false; });
});
</script>
  <style>
  textarea { height:100px; }
  </style>
</head>
<body>
  <center><form>
    <input type="button" value="Input Button"/>
    <input type="file" />
    <input type="hidden" />
    <input type="image" "
src="http://www.oujood.com/images/apprendre.png"/
width="100" />
    <input type="password" />
    <input type="reset" />&nbsp;
    <input type="submit" />
    <input type="text" />
   
<select><option>Option1</option><option>Option2</option>
    </select>
    <textarea id="messages"></textarea>
    <button>Button</button>
  </form>
  </center>
</body>
</html>

Haut de la page

JQuery référenves des sélecteurs

Haut de la page

Par gerywa 25 juillet 2014