Synkroniser checkbox

<script type="text/javascript">
function syncCheckBoxes()
{
  var siblings = document.getElementsByName(this.name);
  for (var i = 0; i < siblings.length; i++)
  {
    if (this != siblings[i])
    {
      siblings[i].checked = this.checked;
    }
  }
}
</script>

Og så en event handler på hver af dine checkboxes:

<input type='checkbox' name='1' onclick="syncCheckBoxes();">

Når du lige har testet at det virker (det håber jeg at det gør), kan du jo passende læse hver enkel linje af de korte script igennem og forstå det - det er temmelig simpelt :)

..jo simpelt er det, men virker bare ikke !-)
Prøv i stedet noget ala:

<script type="text/javascript">
function sync(chb){
  var elm = document.getElementsByName(chb.name);
  for (i=0,elmlen=elm.length;i<elmlen; i++){
    if(chb.checked){ elm[i].checked=true; }
    //else{ elm[i].checked=false; } //hvis markeringerne skal fjernes samtidigt
  }
}
</script>

<form>
<input type='checkbox' name='1' onclick="sync(this);">
<input type='checkbox' name='1' onclick="sync(this);">
<input type='checkbox' name='2' onclick="sync(this);">
<input type='checkbox' name='2' onclick="sync(this);">
</form>

/psc

Kan man ikke bruge this keywordet ved denne deklerative events? I så fald tager jeg den helt på min hat. Jeg sætter normalt ikke events på denne måde selv =\

Anyhow - den pæneste (og fejlrettede) variant af scriptet er nok denne:

<script type="text/javascript">
function syncCheckBoxes(elm)
{
  var siblings = document.getElementsByName(elm.name);
  for (var i = 0; i < siblings.length; i++)
  {
    siblings[i].checked = elm.checked;
  }
}
</script>

Og så en event handler på hver af dine checkboxes:

<input type='checkbox' name='1' onclick="syncCheckBoxes(this);">

..lille optimering:
for(i=0,siblen=sibling.length;i<siblen;i++)

;o)

Den havde jeg slet ikke set før - er det meningen at det skulle øge performance at gemme længden på arrayet i en variabel? Det forekommer mig meget mærkeligt at det skulle være tilfældet, men det er da muligt du har ret :)

Når vi nu er startet på flueknepperiet: Du deklarerer ikke variablerne i og siblen, hvilket imo er noget rod :p

Hej begge :)
Jeg får følgende fejl "sibling is undefined"

Jeg gør følgende:

<script type="text/javascript">
function syncCheckBoxes(elm)
{
  var siblings = document.getElementsByName(elm.name);
  for(i=0,siblen=sibling.length;i<siblen;i++)
  {
    siblings[i].checked = elm.checked;
  }
}
</script>

    <input type="checkbox" name="1" onclick="syncCheckBoxes(this);">
    <input type="checkbox" name="1" onclick="syncCheckBoxes(this);">
    <input type="checkbox" name="2" onclick="syncCheckBoxes(this);">    <input type="checkbox" name="2" onclick="syncCheckBoxes(this);">

Det er fordi variablen hedder siblings - det skal lige rettes i fjerde linje af selve scriptet, hvis du vælger den variant.

<ole>

En name-attribut kan ikke begynde med et tal  ;o)

/mvh
</bole>

davidfossil >> det er muligt det forekommer dig mærkeligt, men jo - den slipper for at regne siblings.length ud for hvert gennemløb (selv om der nok ikke er meget performance at øge lige her)!
Desuden var det ikke flueknepperi - det overlader jeg til de virkelige eksperter herinde. Det var blot en god vane jeg har har lært herinde, men velmente råd er jo heldigvis noget man kan vælge at tage imod, eller smide væk ;o)

/psc

olebole > haha, godt set :)

psykochicken > Jamen jeg takker mange gange for rådet :-) Var simpelthen ikke klar over at det "kostede" noget at spørge til length på et array, men med JavaScripts dynamiske karakter taget i betragting kan jeg godt se at der nok er noget om det. Havde det derimod været et mere typefast sprog (Java, C#) ville jeg da mene at længden på et array skulle være ligeså let at læse som værdien af en lokal int. Eller tager jeg helt fejl igen? Det er jo de små tricks der tæller... ;)

Tak for svar + den ivrige debat. psykochicken du må meget gerne svare.

jo tak, men 100 point er for meget for sådan et spørgsmål. Smid 30 og behold resten selv ;o)

Jeg var glad for diskutionen og deler glædeligt de 100 point mellem jer.