Jak zaznaczyć wiele checkboxów w jQuery?

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 :-)

JavaScript, jQuery, lekcje, wiele checkboxów, zaznaczanie

Ten wpis został opublikowany dnia Styczeń 6, 2009, 11:10 pm i został umieszczony w Programming. Możesz odpowiedzieć na niego poprzez RSS 2.0. Możesz zostawić komentarz lub trackbacka ze swojej strony.

#1 przez sławek dnia Czerwiec 6, 2011 - 7:02 pm

FF okey :)
IE oraz Chrome nie dziala zaznaczanie, tzn ladnie odznacza ale juz ponownie nie zaznacza
da rade to jakos naprawic zeby pod kazda przegladarka ladnie smigalo ?

Cytat

#2 przez coder dnia Czerwiec 6, 2011 - 7:15 pm

Śmiga wszędzie. id=”checkall” dla zaznaczarki a reszta CB z prefixem „id”.

$(„#checkall”).click(function() {
var checked_status = this.checked;
$(‘input[name^="id"]‘).each(function() {
this.checked = checked_status;
});
});

4coders