Für Formularfeldinhalt stellt jQuery eine eigene Funktion namens val() bereit. Während $([Selektor]).attr("value") bei gewöhnlichen Eingabefeldern gute Dienste leistet, sieht die Sache bei Auswahllisten, Radiobuttons oder Checkboxen anders aus.

Beispiel

<form method="get" action="javascript:;">
<select name="Rolle">
  <option value="Lehrer">Lehrer</option> 
  <option value="Schüler" selected>Schüler</option>  
  <option value="Elternteil">Elternteil</option> 
</select>
<hr>
<input name="verkauft" type="checkbox" value="verkauft Kuchen">Kuchen<br> 
<input name="verkauft" type="checkbox" value="verkauft Brezel">Brezel<br> 
<input name="verkauft" type="checkbox" value="verkauft Getränke">Getränke<br> 
<hr>
<input name="von_bis" type="radio" value="von 10 bis 12 Uhr">10 bis 12 Uhr</option> 
<input name="von_bis" type="radio" value="von 12 bis 14 Uhr">12 bis 14 Uhr</option> 
<input name="von_bis" type="radio" value="von 14 bis 16 Uhr">14 bis 16 Uhr</option> 
</form>
<p id="wer_was_wann"></p>
<script type="text/javascript">
function wer_verkauft_was_wann() {
   if($("select[name=Rolle]").val() && 
      $("input[name=verkauft]:checkbox:checked").val() && 
      $("input[name=von_bis]:radio:checked").val())
         $("#wer_was_wann").html($("select[name=Rolle]").val() + " " + 
         $("input[name=verkauft]:checkbox:checked").val() + " " + 
         $("input[name=von_bis]:radio:checked").val());
}
$(document).ready( function() {   
   $("select[name=Rolle]").change( wer_verkauft_was_wann )
   $("input[name=verkauft]").change( wer_verkauft_was_wann );
   $("input[name=von_bis]").change( wer_verkauft_was_wann );   
} );
</script>

Erläuterung

Das Beispiel zeigt eine select-Liste mit drei Einträgen, drei Checkboxen mit gleichem Namen, und drei Radiobuttons mit gleichem Namen. Im unteren Teil des Scripts – innerhalb der Funktion für $(document).ready() – wird auf den change-Eventhandler dieser Elemente reagiert. Er tritt ein, nachdem der Wert des betreffenden Formularfelds vom Anwender geändert wurde.

Beim Eintreten wird die Funktion wer_verkauft_was_wann() aufgerufen. Dort wird mit val() auf die aktuell ausgewählten Einträge der Formulareinträge zugegriffen. $("select[name=Rolle]").val() liefert den Wert der vom Anwender ausgewählten Gruppe (Lehrer, Schüler, Elternteil). $("input[name=von_bis]:radio:checked").val() liefert den ausgewählten Wert der drei Radiobuttons, und $("input[name=verkauft]:checkbox:checked").val() den Wert der ersten ausgewählten Checkbox. Hierbei ist wichtig zu wissen, dass nur der erste Wert geliefert wird, wenn mehrere gleichnamige Einträge ausgewählt sind. Das ist auch bei select-Listen mit der Möglichkeit von Mehrfachauswahl der Fall. Um mehrere ausgewählte Elemente zu ermitteln, wäre im obigen Beispiel folgende Ergänzung möglich:

var verkauft = [];
$("input[name=verkauft]:checkbox:checked").each(function () {
    verkauft.push($(this).val());
});

Dabei wird ein Array definiert – im Beispiel mit dem Namen verkauft. Dann wird auf die Elementmenge der ausgewählten Checkboxen mit name="verkauft" die jQuery-Traversion each() angewendet. In der Funktion, die für jedes ausgewählte Checkbox-Element ausgeführt wird, wird dem Array verkauft mit der Funktion push() der mit val() ermittelte Wert des aktuell von each() behandelten (this) Elements zugewiesen.