Kategorie / Javascript

by Niko

[Javascript/jQuery] Values ausgewählter Checkboxen ermitteln

Szenario: Ich hab ein Formular, ähnlich wie Folgendes, und möchte per Javascript ermitteln, welche Objekte alle ausgewählt sind. Die Werte der ausgewählten Checkboxen möchte ich später bspw. an eine URL semikolongetrennt anhängen. Die Auswertung, welche Checkboxen aktiviert sind oder nicht, soll ohne Absenden des Formulars geschehen.

<form>
    <input type="checkbox" id="checkbox_1" value="1001"/>
    <input type="checkbox" id="checkbox_2" value="1011"/>
    <input type="checkbox" id="checkbox_3" value="1015"/>
</form>

Folgendes Javascript prüft dabei die Checkboxen beim Ändern mittels jQuery und trägt den Wert der Checkbox in ein Array ein.
Wird die Checkbox abgewählt, soll der Wert wieder aus dem Array gelöscht werden.

checkedArray = new Array();
$("[id^=checkbox_]").change(function() {
    if($(this).is(":checked")) {
        checkedArray.push($(this).val());
    } else {
        for(var i=0; i<checkedArray.length;i++ )
        {
            if(checkedArray[i]== $(this).val()) {
                checkedArray.splice(i,1);
            }
        }
    }
});

Das entstandene Array kann in einer weiteren Javascript-Funktion genutzt werden um bspw. an eine URL benötigte URL-Parameter anzuhängen. Über die Funktion .join() werden die Values des Arrays mittels dem übergebenen Separator verkettet und als String ausgegeben. 

location.href = meineUrl + checkedArray.join(';');

Interessante Quellen dazu: