środa, 19 czerwca 2013

JavaScript: pokazywanie i ukrywanie DIV na checkbox

Rozpocząłem pracę w nowym miejscu, gdzie zostałem PHPowcem (trzeba być elastycznym). Jak to zwykle przy dłubaniu w PHP pojawia się też dłubanie w Java Script. Dzisiaj szybki post na temat ukrywania elementów przy pomocy jQuery. Dokładnie to pokazywanie diva po wybraniu checkboxa.
Zadanie pierwotnie wydawało się trudniejsze. Wystarczy dodanie stosunkowo prostej funkcji anonimowej do handlera elementu checkboxa. Może na początek wrzucę kod:

$(document).ready(function() {
$('#add_asistant').change(function() {
if(this.checked)
$('#asistant_form').slideDown();
else
$('#asistant_form').slideUp();
});
}); 


Funkcja została zdefiniowana jako anonimowa dla handlare change elementu input typu checkbox. Jak nie trudno się domyślić, to add_asistant jest id powyższego elementu. asistant_form to id elementu div, który ma zostać pokazany/ukryty.

Wykorzystany został jeden z efektów dostarczanych z jQuery, co sprawia, że pokazywanie i ukrywanie jest realizowane z piękną animacją rozwijania i zwijania. Więcej na temat efektów w jQuery można znaleźć w dokumentacji API.

Czytaj też:

Brak komentarzy:

Prześlij komentarz