Írtam én már erről korábban ( Link ), de abban a cikkben írt megoldásban elég korlátozottak voltak a lehetőségek. Most mutatok egy okosabb megoldást külső könyvtár nélkül, majd egy tényleg tuti megoldást jQuery használatával. Lássuk!
Megoldások
checkbox osztálya alapján
Az előző nagy hibája az volt, hogy a checkAll függvény csak a tartalmazó elem egyedi azonosítója alapján tudott checkboxokat keresni. Ami abban az esetben nem használható, ha tegyük fel, két különböző checkbox-csoportot is szeretnénk kezelni, és egy táblázat egyik oszlopában az egyik csoport lenne, a másikban pedig a másik. Lehet ez egy admin felületen a bejegyzések törlésére és elrejtésére szolgáló két jelölőnégyzet. Ilyenkor a táblázat sorainak összevonásával és belső táblázattal lehetne trükközni, de nem épp szép megoldás születne. Íme az új függvény.
{
var checked = chbx.checked;
var container = document.getElementById(id);
if (!container) return;
var inputs = container.getElementsByTagName('input');
var rx = new RegExp('(^|\\s)'+cls+'($|\\s)');
for (var i in inputs)
{
if (inputs[i].type != 'checkbox') continue;
if(!rx.test(inputs[i].className)) continue;
inputs[i].checked = checked;
}
}
Ez már az id mellett egy osztálynevet is vár. Ami nem a tartalmazó elemre vonatkozik, hanem magára a checkboxra. Így néz ki a táblázat.
<tr>
<th style="background: black;"><input type="checkbox" onclick="checkAllByClass(this, 'checkall','first');" /></th>
<th style="background: black;"><input type="checkbox" onclick="checkAllByClass(this, 'checkall','second');" /></th>
</tr>
<tr>
<td><input class="first xy" type="checkbox" /></td>
<td><input class="second" type="checkbox" /></td>
</tr>
<tr>
<td><input class="first" type="checkbox" /></td>
<td><input class="second bc" type="checkbox" /></td>
</tr>
</table>
A függvényben látható egy reguláris kifejezés, amivel az osztályt keresi a checkboxban. Egyes, neten található példákban a következő mintát használják:
var rx = new RegExp('\\b'+cls+'\\b');
Barátságosabban néz ki, ám megfeledkezik arról az apróságról, hogy az osztályokban a kötőjel is érvényes karakter. És így a kötőjelet is két osztály elválasztójának tekinti.
jQuery-vel, tetszőleges minta alapján
Van viszont még ennél is jobb megoldás. Ez ugyanis egyetlen id és egyetlen osztály alapján dolgozik. Ennél viszont komplikáltabb is lehet néha egy feltétel. Jó esetben persze nem az, de nézzük a jQuery-t használó megoldást.
Fontos, hogy ennél a megoldásnál szükség van a jQuery könyvtárra ( minimum 1.6-os verzió ), amire a html fejlécben hivatkozni kell.
if (!contSelectors) contSelectors = '';
if (!chbSelectors) chbSelectors = '';
$(contSelectors+ ' :checkbox'+chbSelectors).prop('checked', chbx.checked);
}
1.6-nál régebbi verziókban a "prop" helyett csak az "attr" metódus működik. Az 1.9-es verziótól pedig csak a "prop" metódussal hozza a kívánt eredményt a megoldás.
Az első paraméterben megadható bármilyen minta a jQuery szerint a tartalmazó elemre. Második paraméterben pedig tovább lehet szűrni a checkboxokat azok tulajdonságai alapján. Használat közben tehát:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
function checkAllByAny(chbx, contSelectors, chbSelectors) {
if (!contSelectors) contSelectors = '';
if (!chbSelectors) chbSelectors = '';
$(contSelectors+ ' :checkbox'+chbSelectors).prop('checked', chbx.checked);
}
</script>
</head>
<body>
<table border="1" id="checkallAny">
<tr>
<th style="background: black;"><input type="checkbox" onclick="checkAllByAny(this, '#checkallAny','.first');" /></th>
<th style="background: black;"><input type="checkbox" onclick="checkAllByAny(this, '#checkallAny', '.second');" /></th>
</tr>
<tr>
<td><input class="first xy" type="checkbox" /></td>
<td><input class="second" type="checkbox" /></td>
</tr>
<tr>
<td><input class="first" type="checkbox" /></td>
<td><input class="second bc" type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Azt most nem részletezném, hogy jQuery-ben milyen minták használhatók, de a következő oldalon bárki utánanézhet a szelektorok működésének:
jQuery selectors.
A második paramétert egyébként akár el is lehet hagyni. Ekkor ugyanúgy működik majd, mint a korábbi cikkben írt checkAll függvény.
Demo
Ennyi lett volna. Ötletek, tippek továbbra is jöhetnek. Ez a cikk is egy ilyen alapján született.
