[Adestro]

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:

function selectAll(className)
{
kod
}

onclick="selectAll('enklass');"

Har googlat men bara hittat komplicerade lösningar.

Väldigt tacksam för hjälp!

[Adestro]

Har blivit tipsad om denna funktion:

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]

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:

ref = document.getElementsByClassName('minklass');

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

[tartareandesire]

Va? Element med fler än en klass?

[grazzy]

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

[Ristorasto]

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


Däremot fungerar nog nedanstående

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]

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]

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

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]

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]

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.