Tegyük fel, Sok sok pici checkbox van a weboldalon. Például kijelölhetők a törlendő üzenetek. De fárasztó egyenként kattintgatni. JavaScripttel egyszerre kijelölhető akár mind is.
A következőkben erre mutatok megoldást, illetve egy kipróbálható demót is.
Induljunk ki a következő html forrásból:
<div id="checkall1">
Első sor:
<br />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div id="checkall2">
Második sor:<br />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
Két csoport checkbox van. Mindkettő egy div-ben, aminek egyedi id-je van. Így lehet csak az egyik, vagy másik csoportra hivatkozni, ha egyszerre több "Mind kijelöl" funkcióra is szükség van egy oldalon. Lehetne persze class-okat adni az inputoknak, vagy a nevet megadni tömbként stb stb... De ez a legtisztább megoldás szerintem.
Kellene most két újabb checkbox, vagy akár gomb, amire kattintva változik a többi jelölőnégyzet állapota. Ebben a példában ezt a funkciót is egy checkbox tölti be. Mérete is kisebb, és könnyebb ellenőrizni, hogy mire kell váltani az állapotokat.
<input type="checkbox" onclick="checkAll(this, 'checkall1');" /> Első sor kijelölése<br />
<input type="checkbox" onclick="checkAll(this,'checkall2');" /> Második sor kijelölése
Az onclick eseményben található checkAll függvény felel a jelölések változtatásáért. Első paramétere mindig a this. Így a függvényben kattintás után elérhető az input mező objektuma, és lekérdezhető annak a checked tulajdonsága, ami megadja, ki van-e jelölve az adott checkbox. Második paraméter pedig annak a tároló elemnek az azonosítója, amiben a jelölendő checkboxok vannak.
Már csak függvényt kell megírni.
Legyen ez például a checkall.js nevű fájl. Annak tartalma pedig a következő:
function checkAll
(chbx
,id
)
{
var checked
= chbx.
checked;
var container
= document.
getElementById(id
);
if (!container
) return;
var inputs = container.getElementsByTagName('input');
for (var i in inputs)
{
if (inputs[i].type != 'checkbox') continue;
inputs[i].checked = checked;
}
}
Ebben, ha hibás azonosítót kapott a checkAll függvény, nem történik semmi. De ha megtalálta a tároló elemet az azonosítóval, akkor lekérdezi az összes input elemet belőle egy tömbbe. Ez után már csak egy ciklus kell, amiben az összes checkbox típusú input mező checked tulajdonságát beállítjuk ugyanarra, amilyen a kapcsolgató checkboxunké.
Kitérő:
A for-in ciklus hasonló a PHP-ben ismert foreach-hez. Az in után álló tömb összes indexét egymás után betölti az in előtt álló változóba. Így nem kell lekérdezni hány eleme van a tömbnek. És azt sem kell tudni, milyen indexek vannak benne.
