webForumDet fria alternativet

Markera flera checkboxar med ett klick

JavaScriptur Javascript

8 svar · 286 visningar · startad av mattiasnordin

Medlem sedan maj 20012 080 inlägg
Frågan#1

Hej hopp...!

Jag har 2 stycken formulär med checkboxar på en sida. Det är två olika GUI för att göra samma sak. Därmed vill jag att om man markerar en checkbox i det ena formuläret så ska motsvarande checkbox i det andra formuläret vara ikryssat.

Hur åstakommer man något liknande på ett smidigt sätt.`?

Medlem sedan sep. 20021 655 inlägg
#2

Ett sätt:

<script type="text/javascript">
var f1, f2;
window.onload = function() {
   f1 = document.forms["f1"].elements;
   f2 = document.forms["f2"].elements;
}
</script>

...

<form name="f1">
<input type="checkbox" name="c1" onclick="f2.c1.checked = this.checked" />
<input type="checkbox" name="c2" onclick="f2.c2.checked = this.checked" />
<input type="checkbox" name="c3" onclick="f2.c3.checked = this.checked" />
<input type="checkbox" name="c4" onclick="f2.c4.checked = this.checked" />
</form>

<form name="f2">
<input type="checkbox" name="c1" onclick="f1.c1.checked = this.checked" />
<input type="checkbox" name="c2" onclick="f1.c2.checked = this.checked" />
<input type="checkbox" name="c3" onclick="f1.c3.checked = this.checked" />
<input type="checkbox" name="c4" onclick="f1.c4.checked = this.checked" />
</form>
Medlem sedan maj 20012 080 inlägg
#3

Ser lovande ut. Ska testa. Tack snälla :)

Medlem sedan maj 20012 080 inlägg
#4

Vad gör funktionen ???

Och hur gör jag om jag loopar ut formuläret via for / next loop.

Går det att skriva:

<input type="checkbox" name="c<%=myCounter%>" onclick="f2.cc<%=myCounter%>.checked = this.checked" />

Medlem sedan sep. 20021 655 inlägg
#5

mattiasnordin skrev:

Vad gör funktionen ???

Om jag tittar på en enskild checkbox:

<input type="checkbox" name="c1" onclick="f2.c1.checked = this.checked" />

När jag klickar i/ur den letar den upp checkboxen med namnet c1 i formuläret f2 (f2 är en variabel som håller elementen i formuläret med namnet f2 - titta i window.onload-funktionen). Den checkboxen får samma checked-värde som den checkboxen jag klickar i/ur.

mattiasnordin skrev:

Och hur gör jag om jag loopar ut formuläret via for / next loop.

Går det att skriva:

<input type="checkbox" name="c<%=myCounter%>" onclick="f2.cc<%=myCounter%>.checked = this.checked" />

Ja, det går bra, så länge f2 håller en checkbox med namnet ccn.

Medlem sedan maj 20012 080 inlägg
#6

Hmm... jag får det bara att fungera åt ena hållet.

Form_master.req_fil is null or not an object fel får jag...

Jag har de olika formulären i varsin <%sub%> som anropas på sidan. Har det någon betydelse i sammanhanget.

Medlem sedan maj 20012 080 inlägg
#7

My bad... Stavade fel...

Nedan fungerar. Men jag förstår fortfarande inte varför
functionen nedan behöver existera. Det fungerar för mig utan denna.

<script type="text/javascript">
var f1, f2;
window.onload = function() {
f1 = document.forms["f1"].elements;
f2 = document.forms["f2"].elements;
}
</script>

Nedan använder jag...

... Loop 1 ...
<input type="checkbox" value="<%=varHardCounter%>" name=req_hardrive_box_<%=varHardCounter%> onclick="form_master.req_fil_<%=varHardCounter%>.checked = this.checked" /> (req_hardrive_box_<%=varHardCounter%>)

... Loop 2 ...			
<input type="checkbox" value="" name="req_fil_<%=varRowsNum%>" onclick="form_slave.req_hardrive_box_<%=varRowsNum%>.checked = this.checked" />(req_fil_<%=varRowsNum%>)
Medlem sedan sep. 20021 655 inlägg
#8

mattiasnordin skrev:

My bad... Stavade fel...

Nedan fungerar. Men jag förstår fortfarande inte varför
functionen nedan behöver existera. Det fungerar för mig utan denna.

<script type="text/javascript">
var f1, f2;
window.onload = function() {
f1 = document.forms["f1"].elements;
f2 = document.forms["f2"].elements;
}
</script>

Betrakta följande formulär

<form name="f">

För att referera till formuläret kan man skriva på flera olika sätt, t ex

var f1 = document.getElementsByTagName("FORM")["f"];
var f2 = document.getElementsByName("f")[0];
var f3 = document.forms["f"];
var f4 = document.f;
var f5 = f;

De fem variablerna refererar allihopa till samma formulär - det enda som skiljer är hur vi kommer åt formuläret.
När du utelämnar window.onload-funktionen använder du samma metod som i f5, medan jag, genom window.onload-funktionen, använde metoden i f3.
Att skriva som du gjorde är inte lika snyggt (om du frågar mig), men jag vågar inte säga att det är fel. Om du använder en riktig doctype så att Firefox ställer sig i Standards Mode får du dock se att f5 kommer att bli fel, så om jag vore du skulle jag nog satsa på att använda window.onload-funktionen ändå.

Medlem sedan maj 20012 080 inlägg
#9

Ok. Tack för en bra beskrivning !

140 ms totalt · 3 externa anrop · v20260731065814-full.4bcf49fe
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)