Archiwum kategorii: JavaScript

Javascript i checkbox

Witam,

Dzisiaj napiszę o tym jak sprawdzić za pomocą czystego JavaScriptu czy pole input typu checkbox jest zaznaczone.

Tak więc mając:

<input type="checkbox" name="name_checkbox" value="yes">

aby sprawdzić czy checkbox jest zaznaczony należy napisać:

if(document.nazwa_formularza.name_checkbox.checked == true)
    alert('yes');
else
    alert('no');

Jak widać na obiekcie document odwołujemy się do własności checked naszego elementu checkbox podając nazwę formularza w którym się znajduje oraz nazwę checkboxa. Następnie sprawdzamy czy zwrocona zostanie wartość true;

Pola input można również grupować ze sobą w ten sposób:

<p>Checkbox1<input type="checkbox" name="nazwa_checkbox"></p>
<p>Checkbox2<input type="checkbox" name="nazwa_checkbox"></p>
<p>Checkbox3<input type="checkbox" name="nazwa_checkbox"></p>

Własność name każdego checkboxa jest taka sama. Dzięki takiemu grupowaniu można w JavaScripcie np. kontrolować czy chociaż jedno z tych pól zostało zaznaczone itp. Ale to za chwile.

Tymczasem dokonamy sprawdzenia, które pola zostały zaznaczone i po kliknięciu przycisku wyświetlimy ich indeksy:

for (i=0; i<document.nazwa_formularza.name_checkbox.length; i++){
    if (document.nazwa_formularza.nazwa_checkbox[i].checked == true)
        alert("Checkbox o indeksie "+i+" jest zaznaczony!");
}

1. Aby sprawdzić ile mamy checkboxów odnosimy się do własności length

2. Sprawdzamy w pętli własność checked każdego elementu naszej tablicy z checkboxami

Uwaga! Należy pamiętać oczywiście, iż indeksowanie tablicy zaczyna się od 0!

Napiszemy teraz praktyczniejszy skrypt sprawdzający czy chociaż jeden checkbox został zaznaczony:

Plik html:

<form method="post" name="nazwa_formularza" action="index.php">
    <p>Checkbox1<input type="checkbox" name="name_checkbox" value="1"></p>
    <p>Checkbox2<input type="checkbox"name="name_checkbox" value="2"></p>
    <p>Checkbox3<input type="checkbox" name="name_checkbox" value="3"></p>
    <p><input type="submit" value="Wyślij"></p>
</form>

JavaScript:

window.onload = load;

function load(){
    document.forms['nazwa_formularza'].onsubmit = check;
}

function check(){
    var zaznaczony = false;
    for (i=0; i<document.nazwa_formularza.name_checkbox.length; i++){
        if (document.nazwa_formularza.name_checkbox[i].checked == true)
            zaznaczony = true;
    }
    if(zaznaczony == false){
        alert("Zaznacz chociaż jeden!");
        return false;
    }
    else
        return true;
}

Zdarzeniem onload uruchamiamy funkcję load(). Ta zaś przy zdarzeniu onsubmit naszego formularza uruchomi funkcję check(), która sprawdza czy chociaż jedno pole zostało zaznaczone.

Do własności checked można również przypisać wartość true lub false. Wykorzystamy to do zaznaczenia wszystkich pól typu checkbox za pomocą jednego buttona.

Do naszego formularza dodajemy przycisk i nadajemy mu id:

<p><input type="button" id="zaznacz_id" value="Zaznacz wszystkie"></p>

Do funkcji load() dopisujemy

document.getElementById('zaznacz_id').onclick = checkAll;

I teraz w momencie wystąpienia zdarzenia onclick uruchomi się funkcja checkAll();

Następnie utwórzymy taką oto metodę:

function checkAll(){
    for (i=0; i<document.nazwa_formularza.name_checkbox.length; i++){
        document.nazwa_formularza.name_checkbox[i].checked = true;
    }
}

Ale co ona robi to chyba każdy już wie? :)

Tutaj możecie  zobaczyć sobie DEMO tego co teraz robiliśmy. Dopisałem jeszcze funkcję uncheckAll(), która odznacza wszystkie pola.

W najbliższej przyszłości zrobię wpis jak to samo zrobić używając bilbioteki jQuery.

Pozdrawiam