Radio gombok - összes átállítása csoportosan

Radio gombok - összes átállítása csoportosan
2021-06-10T10:21:52+02:00
2021-06-10T18:18:15+02:00
2022-12-06T20:10:41+01:00
Csak egy kérdés
Üdv,

van egy táblázatos listám, ahol minden sornál 2db radio gomb van (itt a name egyforma, de soronként különbözik -> Engedélyező és tiltó funkciókat vezérelnek)
Szeretnék 2 gombot, ahol az összeset engedélyezi, illetve az összeset tiltja.
Hogy lehetne ezt megoldani elegánsan?
Mutasd a teljes hozzászólást!
Hali!

Igen, de ID alapján nem jó, mert az ugye egyedi..

Igen, az id-nek egyedinek kell lennie – ellenben, nálad nem egyedi, több „enabled” és „disabled” id-jű elemed is van (ezt javítani kellene).

Hogy lehetne ezt megoldani elegánsan?

Pl. osztállyal vagy data-attribútumok használatával. Mondjuk, az engedélyező radio-knak legyen „enabled” osztálya, a tiltóknak meg „disabled”. Az engedélyező gomb-kattintásra pedig így hívd a függvényedet (ha már mindenképpen ragaszkodsz az onclick HTML-attribútum használatához):
<button type="button" onclick="myFunction(this, 'enabled');">Összes engedélyezése</button>
A függvényed pedig ilyen lehet:
const myFunction = (element, status) => { let radioButtons = element.closest('form').querySelectorAll('input[type="radio"]'); radioButtons.forEach((el) => { el.checked = el.classList.contains(status); }); }
Működés közben: JSFiddle.
Mutasd a teljes hozzászólást!

  • A radio típusú elemeknek van egy "checked" nevű attribútuma. Azzal tudod ezt módosítani.

    Check a radio button with javascript
    Mutasd a teljes hozzászólást!
  • Igen, de ID alapján nem jó, mert az ugye egyedi..

    Ez van most:

    <form action="" method="POST"> <button type="reset">Alaphelyzetbe állítás</button> <button type="button" onclick="myFunction('enabled')">Összes engedélyezése</button> <table> <tbody> <tr> <td style="border: 1px solid #000; text-align:center;">Engedélyezés</td> <td style="border: 1px solid #000; text-align:center;">Tiltás</td> <td style="border: 1px solid #000; text-align:center;">Adatok</td> <td style="border: 1px solid #000; text-align:center;">SKU</td> <td style="border: 1px solid #000; text-align:center;">ID</td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" id="enabled" name="id-258940" checked></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" id="disabled" name="id-258940"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Tukán zöld</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258940</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" id="enabled" name="id-258941"></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" id="disabled" name="id-258941" checked></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Tukán piros</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258941</span></td> </tr> </tbody> </table> <input type="submit" name="modositas" value="Módosítás"> </form>
    Mutasd a teljes hozzászólást!
  • Engedélyező és tiltó funkciókat vezérelnek

    Mondjuk UX szempontból erre a checkbox szerintem megfelelőbb lenne.
    Mutasd a teljes hozzászólást!
  • A vagy-vagy jelölés miatt nem preferáltam.
    Mutasd a teljes hozzászólást!
  • <script type="text/javascript"> function myFunction(status) { $("." + status).prop('checked', status); } </script>
    Elvileg megoldaná, az inputba egy class-szal.
    De mégsem megy.
    Mutasd a teljes hozzászólást!
  • Hali!

    Igen, de ID alapján nem jó, mert az ugye egyedi..

    Igen, az id-nek egyedinek kell lennie – ellenben, nálad nem egyedi, több „enabled” és „disabled” id-jű elemed is van (ezt javítani kellene).

    Hogy lehetne ezt megoldani elegánsan?

    Pl. osztállyal vagy data-attribútumok használatával. Mondjuk, az engedélyező radio-knak legyen „enabled” osztálya, a tiltóknak meg „disabled”. Az engedélyező gomb-kattintásra pedig így hívd a függvényedet (ha már mindenképpen ragaszkodsz az onclick HTML-attribútum használatához):
    <button type="button" onclick="myFunction(this, 'enabled');">Összes engedélyezése</button>
    A függvényed pedig ilyen lehet:
    const myFunction = (element, status) => { let radioButtons = element.closest('form').querySelectorAll('input[type="radio"]'); radioButtons.forEach((el) => { el.checked = el.classList.contains(status); }); }
    Működés közben: JSFiddle.
    Mutasd a teljes hozzászólást!
  • Ezt próbáltam:

    <script type="text/javascript"> function myFunction(status) { $("." + status).prop('checked', status); } </script> <button type="button" onclick="myFunction('enabled')">Összes engedélyezése</button> <button type="button" onclick="myFunction('disabled')">Összes tiltása</button> <form action="" method="POST"> <table> <tbody><tr> <td style="border: 1px solid #000; text-align:center;">Engedélyezés</td> <td style="border: 1px solid #000; text-align:center;">Tiltás</td> <td style="border: 1px solid #000; text-align:center;">Adatok</td> <td style="border: 1px solid #000; text-align:center;">SKU</td> <td style="border: 1px solid #000; text-align:center;">ID</td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258940" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258940"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Tukán zöld</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258940</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258941" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258941"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Tukán piros</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258941</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258942" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258942"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Majom kék</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258942</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258943" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258943"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Krokodil zöld</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258943</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258944" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258944"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Orrszarvú piros</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258944</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258945" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258945"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Elefánt piros</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258945</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258946" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258946"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Krokodil kék</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258946</span></td> </tr> <tr> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="publish" class="enabled" name="id-258947" checked=""></td> <td style="border: 1px solid #000; text-align:center;"><input type="radio" value="private" class="disabled" name="id-258947"></td> <td style="border: 1px solid #000; text-align:left;"><span>Karkötő Totem Safari többféle - Oroszlán zöld</span></td> <td style="border: 1px solid #000; text-align:left;"><span>NP112832</span></td> <td style="border: 1px solid #000; text-align:left;"><span>258947</span></td> </tr> </tbody></table> <input type="submit" name="modositas" value="Módosítás"> </form>
    Mutasd a teljes hozzászólást!
  • Nekem így néz ki:
    Edit fiddle - JSFiddle - Code Playground

    De nem megy, ha üres oldalra teszem be sem.
    Mutasd a teljes hozzászólást!
  • Hali!

    De nem megy, ha üres oldalra teszem be sem.

    Persze, hogy nem megy, mivel a mindent engedélyező/tiltó gombok nem a form-on belül vannak (a korábbi kódodban még úgy voltak). Így a closest() metódus nem fog visszaadni semmit. Próbálj meg egy konzisztens szerkezetet felépíteni, amihez lehet igazítani a kódot.

    Mutasd a teljes hozzászólást!
  • Formon belül vannak, csak ide másoltam be rosszul :P
    Mutasd a teljes hozzászólást!
  • Köszönöm, így már nálam is működik:)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd