Wie erhalte ich einen Eingabetyp mit jquery?


147

Ich habe eine Seite, auf der der Eingabetyp immer variiert, und ich muss die Werte abhängig vom Eingabetyp abrufen. Wenn es sich bei dem Typ also um ein Radio handelt, muss ich abrufen, welches aktiviert ist, und wenn es sich um ein Kontrollkästchen handelt, muss ich jetzt festlegen, welche aktiviert sind, und wenn es sich um ein Dropdown-Menü handelt, muss ich wissen, welches ausgewählt ist, und ich, wenn dies der Fall ist Ein Text / Textbereich Ich muss die Werte kennen.

Irgendeine Idee, wie das geht?


2
Leute, ihr seid alle abhängig von der Eingabe-ID, aber sollte ich im Falle eines Radios oder eines Kontrollkästchens dieselbe ID haben? zu wissen, dass die ID eindeutig sein muss.
Luci

Antworten:


270

BEARBEITEN 1. Februar 2013. Aufgrund der Beliebtheit dieser Antwort und der Änderungen an jQuery in Version 1.9 (und 2.0) in Bezug auf Eigenschaften und Attribute habe ich einige Notizen und eine Geige hinzugefügt, um zu sehen, wie es funktioniert, wenn auf Eigenschaften / Attribute bei der Eingabe zugegriffen wird. Schaltflächen und einige Auswahlmöglichkeiten. Die Geige hier: http://jsfiddle.net/pVBU8/1/


Holen Sie sich alle Eingaben:

var allInputs = $(":input");

Holen Sie sich alle Eingabetypen:

allInputs.attr('type');

Holen Sie sich die Werte:

allInputs.val();

HINWEIS: .val () ist NICHT dasselbe wie: auf diejenigen Typen überprüft, bei denen dies relevant ist. verwenden:

.attr("checked");

BEARBEITEN 1. Februar 2013 - Zu: jQuery 1.9 Verwenden Sie prop () und nicht attr (), da attr keine korrekten Werte für geänderte Eigenschaften zurückgibt.

.prop('checked');

oder einfach

$(this).checked;

um den Wert des Schecks zu erhalten - was auch immer es aktuell ist. oder verwenden Sie einfach das ': geprüft', wenn Sie nur diejenigen möchten, die geprüft sind.

EDIT: Hier ist ein anderer Weg, um Typ zu bekommen:

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

EDIT2: Beachten Sie, dass die Form von:

$('input:radio');

wird verschoben

$(':radio');

was beide gleichbedeutend sind mit:

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

aber die "Eingabe" ist erwünscht, so dass sie nur die Eingaben erhält und nicht das universelle "*" verwendet, wenn die Form von verwendet $(':radio')wird, die gleich ist$('*:radio');

BEARBEITEN 19. August 2015: Die Präferenz für $('input[type=radio]');sollte verwendet werden, da dies modernen Browsern ermöglicht, die Suche nach einem Radioeingang zu optimieren.


BEARBEITEN 1. Februar 2013 pro Kommentar bezüglich: Elemente auswählen @dariomac

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

gibt je nach Attribut "multiple" und "select-one" oder "select-multiple" zurück

$('select')[0].type 

Gibt dasselbe für die erste Auswahl zurück, falls vorhanden. und

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

gibt den Typ zurück, wenn er existiert, oder "grüß dich", wenn er nicht existiert.

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

Gibt die Eigenschaft des ersten im DOM zurück, falls vorhanden, oder "undefiniert", wenn keine vorhanden ist.

$('select').type

Gibt den Typ des ersten zurück, falls vorhanden, oder einen Fehler, falls keiner vorhanden ist.


Ich habe Folgendes versucht: var type = $ (": input [name =" + name + "]"). Attr ('type'); und es hat funktioniert! Vielen Dank.
Luci

2
Und was ist mit dem "Dropdown" oder der Auswahl der Eingabe ...? weil das kein Eingabe-Tag ist ... Ich habe jetzt das gleiche Problem, aber ich denke, die Eigenschaft type dom zu verwenden ...
dariomac

allInputs.attr('type');erhält nur die ersten Elemente Eingabetyp, dh. allInputs[0].attr('type');wenn die Sammlung mehr als ein Element enthält. Das gleiche gilt für allInputs.val();Wenn Sie etwas mit dem Typ oder Wert jedes Elements tun allInputs.each(function(){ var type = $(this).attr('type'); var val = $(this).val() });
möchten

LOL diese Geige hat mit 82 Revisionen zu diesem Zeitpunkt ein Eigenleben angenommen. jsfiddle.net/pVBU8/82
Mark Schultheiss

15

Sie können Folgendes tun:

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

Bedeutet dies, dass ich jedem Radio die gleiche ID geben muss?
Luci

6
@zeina - Geben Sie Elementen niemals dieselbe ID.
user113716

@ patrick- Ich weiß, dass IDs eindeutig sein müssen, aber warum schlagen sie vor, den Eingabetyp anhand der ID zu ermitteln, und ich habe möglicherweise Radios und ein Kontrollkästchen, in dem ich von ihren Namen abhängen soll?!
Luci

1
NEIN Sie können ihnen nicht dieselbe ID geben, die NICHT gültig ist. Sie können den: input jQuery Selector
Mark Schultheiss

9

Wenn Sie sagen, dass Sie alle Eingaben in einem Formular mit einem Wert erhalten möchten, ohne sich um den Eingabetyp zu kümmern, versuchen Sie Folgendes:

Beispiel: http://jsfiddle.net/nfLfa/

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

Jetzt sollten Sie eine Reihe von Eingabeelementen haben, die einen Wert haben.

Sie können die Werte in ein Array einfügen:

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

Oder Sie könnten sie serialisieren:

var serialized = $inputs.serialize();

7
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();
};


4

Der beste Ort, um zu suchen, ist http://api.jquery.com/category/selectors/

Dies gibt Ihnen eine Reihe guter Beispiele.

Letztendlich wird die Auswahl von Elementen im DOM mithilfe von CSS-Selektoren erreicht. Wenn Sie also überlegen, ein Element anhand der ID abzurufen, sollten Sie $ ('# elementId') verwenden. Wenn Sie möchten, dass alle Eingabe-Tags $ ('input') verwenden. und schließlich den Teil, von dem ich denke, dass Sie ihn möchten, wenn Sie alle Eingabe-Tags mit einer Art Kontrollkästchen verwenden möchten, verwenden Sie $ ('input, [type = checkbox])

Hinweis: Die meisten gewünschten Werte beziehen sich auf Attribute. Der CSS-Selektor für Attribute lautet daher: [attributeName = value]

Versuchen Sie Folgendes, nur weil Sie nach dem Dropdown-Menü für eine Listbox gefragt haben:


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

Der Code stammt aus dem Speicher. Bitte melden Sie sich für kleine Fehler an


Worauf bezieht sich die '[Größe]' hier?
Fremder

@Udhayakumar Die '[Größe]' filtert die Ergebnisse so, dass nur ausgewählte Elemente mit einem Größenattribut enthalten sind. Daher werden nur die Listenfelder ausgewählt und nicht die Dropdown-Listen.
Robert

Listenfelder -> Meinst du Textfelder?
Fremder

1
@Udhayakumar, nein, ich meine Listenfeld, folgen Sie diesem Link [ jsfiddle.net/565961fj ], um den Unterschied zwischen einem Dropdown- und einem Listenfeld zu sehen.
Robert

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

Bemerkungen:

  1. Ich gehe davon aus, dass es genau ein Formularelement gibt, das entweder ein Textbereich, ein Eingabefeld, ein Auswahlformular, eine Reihe von Optionsfeldern oder ein einzelnes Kontrollkästchen sein kann (Sie müssen meinen Code aktualisieren, wenn Sie weitere Kontrollkästchen benötigen).

  2. Das betreffende Element befindet sich in einem Element mit ID container(um Mehrdeutigkeiten mit anderen Elementen auf der Seite zu beseitigen).

  3. Der Code gibt dann den Wert des ersten übereinstimmenden Elements zurück, das er findet. Da ich :checkedund so weiter verwende, sollte dies immer genau der Wert dessen sein, wonach Sie suchen.


3

Es scheint, dass die attr-Funktionalität weiter veraltet ist

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

0

In meiner Bewerbung hatte ich zwei verschiedene Elemente mit derselben ID (schlecht). Ein Element war ein Div und das andere eine Eingabe. Ich habe versucht, meine Eingaben zusammenzufassen, und habe eine Weile gebraucht, um die doppelten IDs zu erkennen. Durch Platzieren des gewünschten Elementtyps vor # konnte ich den Wert des Eingabeelements ermitteln und das div verwerfen:

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

Ich hoffe, es hilft.


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

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

Ich bekomme Wright Form Typ

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.