webForumDet fria alternativet

Vill markera alla checkboxes?

3 svar · 1 273 visningar · startad av evilaid

evilaidMedlem sedan apr. 2009431 inlägg
#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

voigtann1Medlem sedan juni 20018 810 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;
}
evilaidMedlem sedan apr. 2009431 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?

voigtann1Medlem sedan juni 20018 810 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.

355 ms totalt · 5 externa anrop · cache AV · v20260730165559-full.0b955084
0 ms — hämta statistik (cache)
118 ms — slå upp tråd (db)
0 ms — hämta forumlista (cache)
119 ms — hämta inlägg (db)
115 ms — hämta bilagor (db)