Jon-G blogs for


Check / Uncheck all checkboxes

Filed under: Coding — Schlagwörter: — Jonathan Gilbert @ 20:35

It’s a common problem: you have a list of elements on a page and you want yout user to be able to do something to several or all elements at once (delete, move, etc.) so you give each element a checkbox and a „delete selected“ button (or similar :~). Everything is cool but then you figure it would be nice to have a „select all“ resp. „unselect all“ box too, so help avoid „click orgies“. So in the page you generate something like this:

<input type=’checkbox‘ id=’sel1′ value=’xxx‘ name=’sel[]‘ /> xxx
<input type=’checkbox‘ id=’sel2′ value=’yyy‘ name=’sel[]‘ /> yyy
<input type=’checkbox‘ id=’sel3′ value=’zzz‘ name=’sel[]‘ />  zzz
<input type=’checkbox‘ id=’selAll‘ value=“ name=’selAll‘ onClick=’selectAll(this.checked, \“sel[]\“)‘ /> (un)select all

There are several ways of doing this, but I like my solution, just because its mine its short and effective:

function selectAll(state, name) {
..boxes = document.getElementsByName(name);
..boxCnt = boxes.length;
..for (i=0; i<boxCnt; i++) {
....boxes[i].checked = state;

That’s it!


Schreibe einen Kommentar »

Es gibt noch keine Kommentare.

RSS feed for comments on this post. TrackBack URI

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

Du kommentierst mit Deinem Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )


Verbinde mit %s

Bloggen auf

%d Bloggern gefällt das: