4coders

Dziś będzie pierwsza szybka mini lekcja jQuery.

Krótka specyfikacja zadania:

• mamy pewny kontener
• w nim kilka pól typu checkbox
• chcemy zaznaczyć/odznaczyć wszystkie checkboxy przy użyciu jednej akcji

Mniej więcej taki kod HTML:

<!-- nasz przycisk -->
<input id="przycisk" type="button" value="Zaznacz/Odznacz" />
<!-- nasze checkboxy -->
<input name="pole[]" type="checkbox" />
<input name="pole[]" type="checkbox" />

Oto rozwiązanie problemu:

$(document).ready(
	function() {
		$("#przycisk").click(function() {
			status = null;
			$("input[name^=pole]").each(function() {
				if( status == null ) {
					status = !this.checked;
				}
				this.checked = status;
			});
			return false;
		});
	}
);

Co się dzieje w kodzie JavaScript:

• definiujemy zdarzenie onClick na polu id=przycisk
• dzięki jQuery w prosty sposób filtrujemy wszystkie pola input, które posiadają wartość atrybutu name rozpoczynającą się od ciągu “pole”
• każdemu takiemu elementowi zmieniamy atrybut checked na przeciwny (a dokładniej na przeciwny względem pierwszego checkboxa w tym przypadku)

Proste, szybkie, łatwe i wygodne, prawda? No to koniec pierwszej mini lekcji jQuery :-)