jQuery Tutorial – ein Element mit bestimmten Namen selektieren

jQuery Tutorial – Ein Element mit einem speziellen Namen oder Attribut selektieren

In diesem jQuery Tutorial möchte ich Euch zeigen, wie Ihr Elemente nicht nur per Klasse oder ID sondern auch über den Namen, den type oder jedes beliebige andere Attribut ansprechen könnt.

Wir sollten nun zum experimentieren ein paar klassische Input-Felder erstellen:

Beispielcode HTML:

<input type="text" name="vorname" value="Max" />
<input type="text" name="nachname" value="Mustermann" />
<input type="text" name="strasse" value="Musterstr" />
<input type="checkbox" name="agb" value="1" />

Wenn wir uns jetzt den Wert des Input Feldes mit dem Namen „vorname“ per alert anzeigen lassen wollen,
dann können wir das Feld auch ohne ID oder Klasse folgendermaßen ansprechen:

Beispielcode jQuery:

<script type="text/javascript">
alert($('input[name="vorname"]').val());
</script>

Um also ein Element per Attribut also bspw. den Namen zu selektieren setzen wir die Abfrage nach dem Attributnamen und dem gesuchten Attributwert in eckige Klammern.

Wir könnten jetzt auch alle Text-Input Felder ausblenden. Hierzu müssen wir das Attribut type abfragen. Die Checkbox sollte nach wie vor sichtbar sein.:

Beispielcode jQuery:

<script type="text/javascript">
$('input[type="text"]').hide();
</script>

Doch es geht noch weiter. Es gibt sogar die Möglichkeit die Felder zu selektieren, die nur den Teil eines Namens beinhalten. Wir könnten nun bspw. nur die Felder vorname und nachname ausblenden indem wir folgende Abfrage machen:

Beispielcode jQuery:

<script type="text/javascript">
$('input[name*="name"]').hide();
</script>

Auf diese Art und Weise werden uns ungeahnte Möglichkeiten geschenkt, Elementen eigene Attribute zuzuweisen und mit diesen dann weiter zu arbeiten.