JavaScript, mind kijelöl funkció

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.

Teljes kód együtt a javascript-re hivatkozással:

<script type="text/javascript" src="checkall.js"></script>
<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
<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>

Demo:

Első sor kijelölése
Második sor kijelölése

Első sor:

Második sor:

2013. január 27.
norbiizi felvetése alapján elkészült a továbbfejlesztett változat is: Javascript, mind kijelöl funkció. Határok nélkül.

Kategóriák: 
Megosztás/Mentés

Hozzászólások

Salaander képe

Nagyon tetszik!
A JS soha nem volt az erősségem, de most megint elkezdtem és az ilyen leírások segítenek megismerni tömör dolgokat is, mert a programjaid legtöbbször tömörek és szép megoldásúak! "Minden kijelöl" funkcióra sok hosszabb, bonyolultabb példa is van a neten, de ez a legjobb!

gyuri képe

szuper!

ilyen egyszerű, érthető megoldást még sehol sem olvastam! köszi!!! :)

Shadowvzs képe

Woaw nagyon szeretem az ilyen oldalakat(mivel érthetően van elmagyarázva a javascript)! :)

norbiizi képe

Szia Rimelek ezt a hasznos kodót számos egy űrlapon belül de különálló form tag ben többször sikeresen alkalmaztam. Egy új adat akarom kitölteni az űrlapot meg is adom a hivatkozást a scriptnek jól de nem működik. Viszont ha kitörlök egy korábbi űrlap elemet akkor működik. Mi lehet a hiba?

Rimelek képe

Szia. Ez a megoldás csak egy bizonyos id-jű elemen belüli összes checkbox állítgatására jó. Ami azt jelenti, hogy tudnád őket külön állítani, de csak ha a két különböző típusú checkboxokat külön div-ekbe tudod tenni. Vagyis ha neked van két oszlopod és az egyikben a törléshez lehet kijelölni a checkboxokat, a másikban pedig mondjuk az elrejtéshez, akkor ez csak úgy lenne megoldható, ha a két oszlopot nem táblázattal készítenéd, hanem két div-vel, amit egymás mellé teszel css-ben

float: left;

-tel például. Vagy a másik, hogy táblázatot használsz, de összevont sorokkal. És így egy oszlop egy cella, amibe újabb egyoszlopos táblázatot tehetsz annyi sorral, mint amennyi a táblázat többi része. Ez ugye html-ben a "rowspan" attribútummal megy a cellánál.

De mindkét megoldásnál ügyelned kellene arra, hogy az emelek sorban is egymás mellé kerüljenek, ha ez a cél.

A másik megoldás lenne, hogy megpróbálod átalakítani a scriptet. Én kizárólag az id-kre alapoztam a kijelölést. Ha át akarod írni, szintén két lehetőséged van. Az egyik a jQuery használata. Amivel sokkal egyszerűbben lehet komplex hivatkozást írni egy-egy html elemre. Tehát osztályokat is megadhatnál. Mivel nem tudom, használsz-e egyébként jQuery-t és csak emiatt nem is biztos, hogy érdemes, anélkül mutatok megoldást. A HTML5-tel együtt jár egy új metódus javascriptben. Ez a getElementsByClassName. azaz osztályok alapján is le lehet kérni elemeket:

function checkAllByClass(chbx, cls)
{
    var checked = chbx.checked;
    var inputs = document.getElementsByClassName(cls);
    for (var i in inputs)
    {
        inputs[i].checked = checked;
    }
}

Ha a böngésződ támogatja a html5-öt, akkor menni fog. Itt nem az id-t kell megadnod, ami tartalmazza a checkboxokat, hanem a checkboxnak kell adnod egy olyan osztályt, amit más elemekhez nem rendeltél. Mert nem ellenőrzi most, hogy az tényleg checkbox-e.

De ez most egy ilyen gyors megoldás, mert nem érek rá. Remélem, nem írtam el semmit. És a felvetésed köszönöm. Ez alapján ha otthon leszek, kiegészítem majd a cikket egy bővebb leírással. Ha valami nem oké, csak szólj!

norbiizi képe

Megtaláltam a hibát, kérem a moderátort törölje a hozzászólásomat, mert tárgytalanná vált. Amennyiben a megoldás érdekes lehet mások számára úgy szívesen leírom.

Rimelek képe

Ha nem bánod, megtartanám, mert már válaszoltam közben rá. De ha más nem is, én kíváncsi vagyok, hogy oldottad meg. Leírnád?

Egyébként én vagyok az egyetlen moderátor :) Ezért kell néha kicsit többet várni egy válaszra, de válaszolok.