Jak uzyskać typ danych wejściowych za pomocą jQuery?

Mam stronę, na której typ danych wejściowych zawsze się zmienia i muszę uzyskać wartości w zależności od typu danych wejściowych. Czyli jeśli typ to radio to muszę dostać które jest zaznaczone a jeśli to checkbox to muszę to teraz które zaznaczam a jeśli to jest rozwijane to muszę wiedzieć które jest zaznaczone a ja czy tak tekst / obszar tekstowy Muszę znać wartości.

Masz jakiś pomysł, jak to zrobić?

EDYCJA 1 lutego 2013. Ze względu na popularność tej odpowiedzi i zmiany w jQuery w wersji 1.9 (i 2.0) dotyczące właściwości i atrybutów, dodałem kilka uwag i skrzypiec, aby zobaczyć, jak to działa podczas uzyskiwania dostępu do właściwości / atrybutów na wejściu, przyciski i niektóre opcje. Skrzypce tutaj: http://jsfiddle.net/pVBU8/1/

pobierz wszystkie dane wejściowe:

var allInputs = $(":input");

pobierz wszystkie typy wejść:

allInputs.attr('type');

pobierz wartości:

allInputs.val();

UWAGA: .val () NIE jest tym samym, co: zaznaczone dla tych typów, dla których ma to znaczenie. posługiwać się:

.attr("checked");

EDYCJA 1 lutego 2013 - re: jQuery 1.9 użyj prop () nie attr (), ponieważ attr nie zwróci prawidłowych wartości dla właściwości, które uległy zmianie.

.prop('checked');

lub po prostu

$(this).checked;

aby uzyskać wartość czeku - cokolwiek to jest. lub po prostu użyj ': selected', jeśli chcesz tylko te, które SĄ zaznaczone.

EDYCJA: Oto inny sposób na uzyskanie typu:

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

EDIT2: Zwróć uwagę, że forma:

$('input:radio');

jest przekonany

$(':radio');

które są równoznaczne z:

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

ale „wejście” jest pożądane, więc pobiera tylko dane wejściowe i nie używa uniwersalnego „*”, gdy $(':radio')używana jest forma z, która równa się$('*:radio');

EDYCJA 19 sierpnia 2015 r .: $('input[type=radio]');należy używać preferencji, ponieważ umożliwia to nowoczesnym przeglądarkom optymalizację wyszukiwania wejścia radiowego.

EDYCJA 1 lutego 2013 za komentarz re: select elements @dariomac

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

zwróci wartość „wybierz jeden” lub „wybierz wiele” w zależności od atrybutu „wiele” i

$('select')[0].type 

zwraca to samo dla pierwszego zaznaczenia, jeśli istnieje. i

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

zwróci typ, jeśli istnieje, lub „howdy”, jeśli nie.

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

zwraca własność pierwszej z nich w DOM, jeśli istnieje, lub „nieokreślona”, jeśli żadna nie istnieje.

$('select').type

zwraca typ pierwszego, jeśli istnieje, lub błąd, jeśli żaden nie istnieje.

Możesz wykonać następujące czynności:

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

Jeśli mówisz, że chcesz uzyskać wszystkie dane wejściowe wewnątrz formularza, które mają wartość, bez martwienia się o typ danych wejściowych, spróbuj tego:

Przykład: http://jsfiddle.net/nfLfa/

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

Teraz powinieneś mieć zestaw elementów wejściowych, które mają pewną wartość.

Możesz umieścić wartości w tablicy:

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

Lub możesz je serializować:

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

Najlepszym miejscem do rozpoczęcia poszukiwań jest http://api.jquery.com/category/selectors/

To da ci dobry zestaw przykładów.

Ostatecznie wybór elementów w DOM jest osiągany za pomocą selektorów CSS, więc jeśli myślisz o uzyskaniu elementu przez id, będziesz chciał użyć $ ('# elementId'), jeśli chcesz, aby wszystkie tagi wejściowe, użyj $ ('input') i na koniec część, którą myślę, że będziesz potrzebować, jeśli chcesz, aby wszystkie tagi wejściowe z typem pola wyboru, użyj $ ('input, [type = checkbox])

Uwaga: większość żądanych wartości znajduje się w atrybutach, więc selektor css atrybutów to: [nazwa_atrybutu = wartość]

Tylko dlatego, że poprosiłeś o listę rozwijaną obok pola listy, spróbuj wykonać następujące czynności:

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

Kod pochodzi z pamięci, więc prosimy o uwzględnienie drobnych błędów

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

Uwagi:

1. Zakładam, że istnieje dokładnie jeden element formularza, który może być albo obszarem tekstu, polem wprowadzania, formularzem wyboru, zestawem przycisków radiowych lub pojedynczym polem wyboru (będziesz musiał zaktualizować mój kod, jeśli potrzebujesz więcej pól wyboru).

2. Przedmiotowy element znajduje się wewnątrz elementu o identyfikatorze container(aby usunąć niejednoznaczności z innymi elementami na stronie).

3. Kod zwróci wartość pierwszego znalezionego pasującego elementu. Ponieważ używam :checkedi tak dalej, zawsze powinna to być dokładnie wartość tego, czego szukasz.

Wydawałoby się, że funkcja attr jest coraz bardziej przestarzała

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

W mojej aplikacji skończyło się na dwóch różnych elementach mających ten sam identyfikator (źle). Jeden element to div, a drugi dane wejściowe. Próbowałem podsumować swoje dane wejściowe i zajęło mi trochę czasu, zanim zdałem sobie sprawę z podwójnych identyfikatorów. Umieszczając typ elementu, który chciałem, przed #, udało mi się pobrać wartość elementu wejściowego i odrzucić div:

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

Mam nadzieję, że to pomoże.

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

Dostaję typ formularza wright