WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Markera alla checkboxar med en viss klass (https://www.wn.se/forum/showthread.php?t=26052)

Adestro 2008-01-06 13:40

Jag behöver hjälp med en simpel javascript-funktion som tar en parameter med klassnamn och sedan sätter checked på alla checkboxar med den klassen. Dvs:
Kod:

function selectAll(className)
{
kod
}

onclick="selectAll('enklass');"

Har googlat men bara hittat komplicerade lösningar.

Väldigt tacksam för hjälp!

Adestro 2008-01-06 17:23

Har blivit tipsad om denna funktion:

Kod:

function selectAll(name)
{
 var elms = document.forms["myFormName"].elements, len = elms.length;
 while (len--)
 if (/^checkbox$/i.test(elms[len].type) && elms[len].className == name)
  elms[len].checked = true;
}

Dock så fungerar den endast på element med endast en klass. Element med fler än en klass påverkas ej. Några tips?

grazzy 2008-01-06 18:12

Kod:

ref = document.getElementsByTagName('input');

for (i=0;i<ref.length;i++) {
 if (ref[i].className.search(/minklass/)>=0)
 ref[i].checked='checked';
}

Den här koden kommer att faila om du har en annan klass som heter "minklassA" tex, eftersom minklassA innehåller "minklass". Därför så skulle det nog vara bättre om du använder nån av de miljarders implementationer av getElementsByClassName som finns när du googlar på det. Det kanske kan vara att rekommendera eftersom du då slipper mecka med regexp i din kod.

Ex på detta:
Kod:

ref = document.getElementsByClassName('minklass');

for (i=0;i<ref.length;i++) {
 ref[i].checked='checked';
}


tartareandesire 2008-01-06 18:14

Va? Element med fler än en klass?

grazzy 2008-01-06 18:19

<tag class="storafonten vackrafargen finaflickanbakgrunden">en tagg med många klasser</tag>

Ristorasto 2008-01-06 18:25

vad han tänkte på var nog <tag class="något" class="något annat">


Däremot fungerar nog nedanstående

Kod:

function checkCheckboxes(nameOfTag)
{
        var elements = document.getElementsByTagName(nameOfTag, nameOfClass);
       
        for (i=0;i<elements.length; i++)
        {
 if(elements[i].className == nameOfClass)
 {
        elements[i].checked = true;
 }
        }
}


grazzy 2008-01-06 18:32

Fungerar nog .. inte. Du anropar getElementsByTagName med två variabler och hela grejen är att className-propertyn är en sträng med alla befintliga taggar concatenerade. Alltså kan du inte köra jämförelser direkt på den.

getElementsByClassName är söligare än min approch eftersom den traverserar alla objekt i DOM-trädet och kollar strängar men marginellt snyggare kod.

Ristorasto 2008-01-06 18:44

Alldeles rätt. Jag skrev det lite väl hastat. Parametrarna skulle ju ligga i funktionens signatur :-)
Lätt det blir fel ibland. Hursomhelst så funkar den under förutsättning att klassen som fungerar som markeringsdefinition ligger först av de definierade klasserna.

Annars så går det ju lika bra med grazzys implementation. Problemet någorlunda löst iaf

Kod:

function checkCheckboxes(nameOfTag, nameOfClass)
{
        var elements = document.getElementsByTagName(nameOfTag);
       
        for (i=0;i<elements.length; i++)
        {
 if(elements[i].className == nameOfClass)
 {
        elements[i].checked = true;
        alert(elements[i].className);
 }
        }
}


tartareandesire 2008-01-06 21:18

Där ser man, efter många års kodande hade jag faktiskt inte koll på att det gick att sätta flera klasser på element =) Har aldrig haft behov av det antar jag.

Skulle ge dig samma tips som grazzy. getElementsByClassName är alltså inte en funktion som finns i Javascript men det finns som han nämnde tusentals lättfunna exempel på nätet.

dAEk 2008-01-06 23:07

Citat:

Originally posted by tartareandesire@Jan 6 2008, 22:18
Där ser man, efter många års kodande hade jag faktiskt inte koll på att det gick att sätta flera klasser på element =) Har aldrig haft behov av det antar jag.

Skulle ge dig samma tips som grazzy. getElementsByClassName är alltså inte en funktion som finns i Javascript men det finns som han nämnde tusentals lättfunna exempel på nätet.

Jodå, det finns implementerat i WebKit, Firefox 3 och Opera 9.5. De är förvisso bara i beta-stadiet än så länge men det kommer!

Kör på en lösning som kollar om det finns en implementering i webbläsaren med fallback till javascript-lösningen eftersom även den snabbaste javascript-varianten av getElementsByClassName lär vara (mycket) långsammare.


Alla tider är GMT +2. Klockan är nu 17:06.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson