webForumDet fria alternativet

Vill markera alla checkboxes?

JavaScript

3 svar · 1 275 visningar · startad av evilaid

Medlem sedan apr. 2009433 inlägg
Frågan#1

Hej

Jag vill ha en checkbox som när den markeras så markeras alla checboxar på sidan.. Använder denna lilla kod:

function Check(chk) {
    if (document.myform.Check_ctr.checked == true) {
        for (i = 0; i < chk.length; i++)
            chk[i].checked = true;
    } else {

        for (i = 0; i < chk.length; i++)
            chk[i].checked = false;
    }
}

Och anropar så här

<input type="checkbox" name="Check_ctr" value="yes"
onClick="Check(document.myform.check_list)"><b>Check Control</b>

Den funkar ju bra men den bygger på att alla checkboxar har samma namn (check_list). Grejen är den att alla mina checboxar får ett idnummer som "name" då jag loopar igenom alla med asp och på det sättet får ut värdet..

Går det göra om denna så man använder sig av "id" istället? alltså om alla checboxar ser ut så här <input type="checkbox" id="check_list" name="id123">

Provade lite med document.getElementById() men fick inte det att fungera??

Mvh

Medlem sedan juni 20019 519 inlägg
#2

get element by id - som metoden säger den kommer bara hämta ut ett element, så det är galet.

En enkel lösning är jquery med CSS selectorn för [name^=xxx] att den skall börja med xxx demo: http://jsbin.com/exefe5/edit

Och ID:n är unika! så kasta bort den idéen att ha flera element med samma ID, det är FEL!

Sen om du vill ändå köra din metod så kan du korta ner den en hel del:

function Check(chk) {
	for (i = 0; i < chk.length; i++)
		chk[i].checked = document.myform.Check_ctr.checked;
}
Medlem sedan apr. 2009433 inlägg
#3

Okey, jag kastar idéen med getElementById. Var bara en tanke jag trodde hade fungerat..

Fan va smart du skrev om koden föresten, snyggt.. Men med nuvarande kod då, kan man inte kontrollera om checkbox namnet innehåller "id"?

Jag fick din kod att fungera nu efter lite strul.. VIsade det sig att jag redan inkluderat jquery "bibliotek" (eller vad det kallas) då jag har en liten häftigare meny på sidan.. Den filen jag inkluderade var nog en äldre version..

Kan inte säga att jag förstår det här med jquery? är det redan färdiga funktioner som ligger där i? hur går det till?

Medlem sedan juni 20019 519 inlägg
#4

jquery är ett Javascripts ramverk, och den har en CSS-selector för att hitta element med hjälp av CSS syntax

Eftersom jsbin postar JS koden längst ner på sidan så slipper jag bry mig om att kolla om element finns på sidan annars kan du skriva:

$(function() { //DOM-ready, så fort JS koden kommer åt DOM-trädet (html element) kör koden
    $("#selectAll").change(function() { // Letar upp element som har ett ID med "selectAll" bind ett change-event på den
        $(":checkbox[name^=id]").attr("checked", this.checked);  // Letar upp alla checkboxar med namn som börjar med id, kolla vad #selectAll har för checked värde och sätt det värdet till alla checkboxar som den hittar
    }); //Avsluta change eventet
}); //avsluta DOM-ready metoden

Förklaring rad för rad.

279 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
145 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
145 ms — ändringar (db)