Come ottenere il tipo di input usando jquery?

Ho una pagina in cui il tipo di input varia sempre e devo ottenere i valori in base al tipo di input. Quindi, se il tipo è una radio, ho bisogno di ottenere quale è selezionato, e se è una casella di controllo devo ora quali sono selezionati, e se è un menu a discesa ho bisogno di sapere quale è selezionato, e se è a text / textarea ho bisogno di conoscere i valori.

Qualche idea su come farlo?

MODIFICA del 1 ° febbraio 2013. A causa della popolarità di questa risposta e delle modifiche a jQuery nella versione 1.9 (e 2.0) per quanto riguarda proprietà e attributi, ho aggiunto alcune note e un violino per vedere come funziona quando si accede a proprietà / attributi in input, pulsanti e alcune selezioni. Il violino qui: http://jsfiddle.net/pVBU8/1/

ottenere tutti gli input:

var allInputs = $(":input");

ottenere tutti i tipi di input:

allInputs.attr('type');

ottenere i valori:

allInputs.val();

NOTA: .val () NON è lo stesso di: controllato per quei tipi in cui ciò è rilevante. uso:

.attr("checked");

MODIFICA 1 febbraio 2013 - re: jQuery 1.9 utilizzare prop () non attr () poiché attr non restituirà i valori corretti per le proprietà che sono state modificate.

.prop('checked');

o semplicemente

$(this).checked;

per ottenere il valore dell'assegno, qualunque esso sia attualmente. o semplicemente usa ': controllato' se vuoi solo quelli che SONO controllati.

EDIT: ecco un altro modo per ottenere il tipo:

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

EDIT2: nota che la forma di:

$('input:radio');

è rinviato

$(':radio');

che equivalgono entrambi a:

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

ma si desidera "input" in modo che ottenga solo input e non usi l'universale '* "quando $(':radio')viene utilizzata la forma di che equivale a$('*:radio');

EDIT 19 agosto 2015: la preferenza per il $('input[type=radio]');dovrebbe essere utilizzata in quanto ciò consente quindi ai browser moderni di ottimizzare la ricerca di un ingresso radio.

MODIFICA 1 feb 2013 per commento re: select elements @dariomac

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

restituirà "select-one" o "select-multiple" a seconda dell'attributo "multiple" e

$('select')[0].type 

restituisce lo stesso per la prima selezione se esiste. e

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

restituirà il tipo se esiste o "howdy" in caso contrario.

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

restituisce la proprietà della prima nel DOM se esiste o "non definita" se non esiste.

$('select').type

restituisce il tipo del primo se esiste o un errore se non esiste.

Puoi fare quanto segue:

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

Se quello che stai dicendo è che vuoi ottenere tutti gli input in un modulo che hanno un valore senza preoccuparti del tipo di input, prova questo:

Esempio: http://jsfiddle.net/nfLfa/

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

Ora dovresti avere un insieme di elementi di input che hanno un certo valore.

È possibile inserire i valori in un array:

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

Oppure potresti serializzarli:

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');

Il posto migliore per iniziare a cercare è http://api.jquery.com/category/selectors/

Questo ti darà una buona serie di esempi.

In definitiva, la selezione degli elementi nel DOM viene raggiunta usando i selettori CSS, quindi se pensi di ottenere un elemento in base all'id vorrai usare $ ('# elementId'), se vuoi tutti i tag di input usa $ ('input') e infine la parte che penso che vorrai se vuoi tutti i tag di input con un tipo di checkbox usa $ ('input, [type = checkbox])

Nota: troverete la maggior parte dei valori desiderati negli attributi, quindi il selettore CSS per gli attributi è: [nome attributo = valore]

Solo perché hai chiesto il menu a discesa come assegnato a una casella di riepilogo, prova quanto segue:

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

Il codice era dalla memoria, quindi ti preghiamo di rendere conto di piccoli errori

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

Commenti:

1. Presumo che esista esattamente un elemento del modulo, che può essere un'area di testo, un campo di input, un modulo di selezione, una serie di pulsanti di opzione o una singola casella di controllo (dovrai aggiornare il mio codice se hai bisogno di più caselle di controllo).

2. L'elemento in questione vive all'interno di un elemento con ID container(per rimuovere le ambiguenze con altri elementi nella pagina).

3. Il codice restituirà quindi il valore del primo elemento corrispondente che trova. Dal momento che io uso :checkede così via, questo dovrebbe sempre essere esattamente il valore di ciò che stai cercando.

Sembrerebbe che la funzionalità attr stia diventando ulteriormente deprecata

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

Nella mia applicazione ho finito con due diversi elementi con lo stesso ID (non valido). Un elemento era un div e l'altro un input. Stavo cercando di riassumere i miei input e mi ci è voluto un po 'per realizzare gli ID duplicati. Posizionando il tipo di elemento che volevo davanti a #, sono stato in grado di afferrare il valore dell'elemento di input e scartare il div:

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

Spero possa essere d'aiuto.

<!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>

ottengo il tipo di modulo wright