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

Les sélecteurs des éléments de formulaire sont des sélecteurs qui sélectionnent les éléments dans un formulaire pour pouvoir les manipuler avec jQuery.

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 :

  1. Sélecteur :button   Sélectionne tous les éléments  bouton et/ou  tous les éléments de type bouton.
  2. Sélecteur :checkbox Sélectionne tous les éléments de type checkbox.
  3. Sélecteur :checked Sélectionne tous les éléments de type checkbox qui sont cochés
  4. Sélecteur :disabled Sélectionne tous les éléments qui sont désactivées.
  5. Sélecteur :enabled Sélectionne tous les éléments qui sont activées.
  6. Sélecteur :file Sélectionne tous les éléments de type file
  7. Sélecteur :focus Sélectionne l'élément s’il a le focus actuellement.
  8. Sélecteur :image Sélectionne tous les éléments de type image
  9. Sélecteur :input Sélectionne tous les éléments input, textarea,  et bouton.
  10. Sélecteur :password   Sélectionne tous les éléments de type password (mot de passe) .
  11. Sélecteur :radio Sélectionne tous les éléments de type radio.
  12. Sélecteur :reset Sélectionne tous les éléments de type reset.
  13. Sélecteur :selected Sélectionne tous les éléments sélectionnés.
  14. Sélecteur :submit Sélectionne tous les éléments de type submit
  15. 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




Haut de la page

Par gerywa 25 juillet 2014