Avatar billede renewester Nybegynder
17. marts 2009 - 08:07 Der er 4 kommentarer og
1 løsning

Marker flere checkbokse i ét hug

Hej

Jeg har x-antal checkbokse opdelt i grupper.
Under hver gruppe har jeg behov for en knap der markerer alle bokse i gruppen.

Nogen der ved hvordan man smartest gør det i Javascript?

<input type="checkbox" name="bil_1">
<input type="checkbox" name="bil_2">
<input type="checkbox" name="bil_3">
[MARKER ALLE]

<input type="checkbox" name="cykel_1">
<input type="checkbox" name="cykel_2">
<input type="checkbox" name="cykel_3">
<input type="checkbox" name="cykel_4">
[MARKER ALLE]

<input type="checkbox" name="bus_1">
[MARKER ALLE]
Avatar billede Slater Ekspert
17. marts 2009 - 08:54 #1
<div id="box1">
  <input type="checkbox" name="bil_1">
  <input type="checkbox" name="bil_2">
  <input type="checkbox" name="bil_3">
</div>
<button onclick="selectall(1)">Marker alle</button>

<div id="box2">
  <input type="checkbox" name="cykel_1">
  <input type="checkbox" name="cykel_2">
  <input type="checkbox" name="cykel_3">
  <input type="checkbox" name="cykel_4">
</div>
<button onclick="selectall(2)">Marker alle</button>

<div id="box3">
  <input type="checkbox" name="bus_1">
</div>
<button onclick="selectall(3)">Marker alle</button>


<script type="text/javascript">

function selectall(id) {
  var box = document.getElementById('box'+id);
  var tags = box.getElementsByTagName('input');
  var action = tags[0].getAttribute('checked') == 'checked' ? false : true;
  for (var i = 0; i < tags.length; i++) {
      if (tags[i].getAttribute('type') == 'checkbox') {
        if (action)
            tags[i].setAttribute('checked', 'checked');
        else
            tags[i].removeAttribute('checked');
      }
  }
}

</script>
Avatar billede Slater Ekspert
17. marts 2009 - 09:03 #2
... og jeg opdager lige at Internet Explorer 6 ikke forstår removeAttribute, så man er nødt til at lave funktionen noget i denne stil, for at det virker alle steder:

function selectall(id) {
  var box = document.getElementById('box'+id);
  var tags = box.getElementsByTagName('input');
  var action = !tags[0].getAttribute('checked');
  for (var i = 0; i < tags.length; i++) {
      if (tags[i].getAttribute('type') == 'checkbox') {
        if (action)
            tags[i].setAttribute('checked', 'checked');
        else {
            if (document.all)
              tags[i].checked = false;
            else
              tags[i].removeAttribute('checked');
        }
      }
  }
}


- Det er bare forfærdelig kode :(
Avatar billede renewester Nybegynder
17. marts 2009 - 10:05 #3
Hej Viperine

Tak for hurtigt svar.
Jeg får følgende fejl når jeg klikker på en af knapperne:

Fejl: '0' er null eller ikke et objekt.

Jeg vil mene der henvises til linjen:
var action = !tags[0].getAttribute('checked');

Kan du gennemskue hvorfor jeg får denne fejl?
Avatar billede renewester Nybegynder
17. marts 2009 - 10:09 #4
Ups, jeg fandt selv ud af det.
Jeg havde sat DIV tag'en indenfor en table.
Sorry, og tusinde tak for hjælpen :-)

Laver du dine kommentarer om til svar?
Avatar billede Slater Ekspert
17. marts 2009 - 10:47 #5
Så gerne :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester