Comment obtenir le type d'entrée en utilisant jquery?

J'ai une page où le type d'entrée varie toujours et j'ai besoin d'obtenir les valeurs en fonction du type d'entrée. Donc, si le type est une radio, je dois obtenir laquelle est cochée, et si c'est une case à cocher, je dois maintenant qui est cochée, et si c'est une liste déroulante, j'ai besoin de savoir laquelle est sélectionnée, et je si c'est un texte / textarea J'ai besoin de connaître les valeurs.

Une idée sur la façon de faire ça?

EDIT 1 février 2013. En raison de la popularité de cette réponse et des modifications apportées à jQuery dans la version 1.9 (et 2.0) concernant les propriétés et les attributs, j'ai ajouté quelques notes et un violon pour voir comment cela fonctionne lors de l'accès aux propriétés / attributs en entrée, boutons et quelques sélections. Le violon ici: http://jsfiddle.net/pVBU8/1/

obtenir toutes les entrées:

var allInputs = $(":input");

obtenir tous les types d'entrées:

allInputs.attr('type');

obtenir les valeurs:

allInputs.val();

REMARQUE: .val () n'est PAS le même que: vérifié pour les types où cela est pertinent. utilisation:

.attr("checked");

EDIT 1 février 2013 - re: jQuery 1.9 utilisez prop () et non attr () car attr ne retournera pas les valeurs appropriées pour les propriétés qui ont changé.

.prop('checked');

ou simplement

$(this).checked;

pour obtenir la valeur du chèque - quelle qu'elle soit actuellement. ou utilisez simplement le ': vérifié' si vous ne voulez que ceux qui SONT vérifiés.

EDIT: Voici une autre façon d'obtenir le type:

var allCheckboxes=$('[type=checkbox]');

EDIT2: Notez que la forme de:

$('input:radio');

est perfectionné sur

$(':radio');

qui correspondent tous deux à:

$('input[type=radio]');

mais l '"entrée" est souhaitée, elle n'obtient donc que les entrées et n'utilise pas le' * "universel lorsque la forme de $(':radio')est utilisée, ce qui équivaut à$('*:radio');

EDIT 19 août 2015: la préférence pour le $('input[type=radio]');doit être utilisée car cela permet alors aux navigateurs modernes d'optimiser la recherche d'une entrée radio.

EDIT 1 février 2013 par commentaire re: select elements @dariomac

$('select').prop("type");

renverra "select-one" ou "select-multiple" selon l'attribut "multiple" et

$('select')[0].type 

renvoie la même chose pour la première sélection si elle existe. et

($('select')[0]?$('select')[0].type:"howdy") 

renverra le type s'il existe ou "howdy" si ce n'est pas le cas.

 $('select').prop('type');

renvoie la propriété du premier dans le DOM s'il existe ou "indéfini" s'il n'en existe pas.

$('select').type

renvoie le type du premier s'il existe ou une erreur s'il n'y en a pas.

Vous pouvez faire ce qui suit:

var inputType = $('#inputid').attr('type');

Si ce que vous dites est que vous souhaitez obtenir toutes les entrées dans un formulaire qui ont une valeur sans vous soucier du type d'entrée, essayez ceci:

Exemple: http://jsfiddle.net/nfLfa/

var $inputs = $('form').find(':checked,:selected,:text,textarea').filter(function() {
    return $.trim( this.value ) != '';
});

Vous devriez maintenant avoir un ensemble d'éléments d'entrée qui ont une certaine valeur.

Vous pouvez mettre les valeurs dans un tableau:

var array = $inputs.map(function(){
    return this.value;
}).get();

Ou vous pouvez les sérialiser:

var serialized = $inputs.serialize();

GetValue = function(id) {
  var tag = this.tagName;
  var type = this.attr("type");

  if (tag == "input" && (type == "checkbox" || type == "radio"))
    return this.is(":checked");

  return this.val();
};

$("#yourobj").attr('type');

Le meilleur endroit pour commencer à chercher est http://api.jquery.com/category/selectors/

Cela vous donnera un bon ensemble d'exemples.

En fin de compte, la sélection des éléments dans le DOM est réalisée à l'aide de sélecteurs CSS, donc si vous pensez obtenir un élément par id, vous voudrez utiliser $ ('# elementId'), si vous voulez que toutes les balises d'entrée utilisent $ ('input') et enfin la partie que je pense que vous voudrez si vous voulez que toutes les balises d'entrée avec un type de case à cocher utilisent $ ('input, [type = checkbox])

Remarque: vous trouverez que la plupart des valeurs souhaitées se trouvent sur des attributs, de sorte que le sélecteur css pour les attributs est: [attributeName = value]

Juste parce que vous avez demandé la liste déroulante comme une zone de liste, essayez ce qui suit:

$('select, [size]).each(function(){
  var selectedItem = $('select, [select]', this).first();
});

Le code provenait de la mémoire, veuillez donc signaler les petites erreurs

var val = $('input:checkbox:checked, input:radio:checked, \
   select option:selected, textarea, input:text',
   $('#container')).val();

Commentaires:

1. Je suppose qu'il y a exactement un élément de formulaire, qui peut être une zone de texte, un champ de saisie, un formulaire de sélection, un ensemble de boutons radio ou une seule case à cocher (vous devrez mettre à jour mon code si vous avez besoin de plus de cases à cocher).

2. L'élément en question vit à l'intérieur d'un élément avec ID container(pour supprimer les ambiguïtés avec d'autres éléments de la page).

3. Le code renverra alors la valeur du premier élément correspondant qu'il trouve. Depuis que j'utilise :checkedet ainsi de suite, cela devrait toujours être exactement la valeur de ce que vous recherchez.

Il semblerait que la fonctionnalité attr soit de plus en plus obsolète

$(this).attr('TYPE')
undefined
$(this).prop('type')
"text"

Dans mon application, je me suis retrouvé avec deux éléments différents ayant le même identifiant (mauvais). Un élément était un div et l'autre une entrée. J'essayais de résumer mes entrées et il m'a fallu un certain temps pour réaliser les identifiants en double. En plaçant le type de l'élément que je voulais devant #, j'ai pu saisir la valeur de l'élément d'entrée et supprimer le div:

$("input#_myelementid").val();

J'espère que cela aide.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $(".show-pwd").click(function(){
          alert();
            var x = $("#myInput");
            if (x[0].type === "password") {
              x[0].type = "text";
            } else {
              x[0].type = "password";
            }
          });
        });
    </script>
</head>

<body>
    <p>Click the radio button to toggle between password visibility:</p>Password:
    <input type="password" value="FakePSW" id="myInput">
    <br>
    <br>
    <input type="checkbox" class="show-pwd">Show Password</body>

</html>

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="hs/jquery1.js"></script>
        <title>Document</title>
    </head>
    <body>
        <form>
            <input type="text" class="tamil">
            <input type="button" class="english">
        </form>
        <script>
            $("input").addClass(function(index){
                    console.log($(this).attr('type'));
            })
        </script>
    </body>
    </html>

je reçois un type de formulaire correct