Tælle antal afkrydsede checkboxes og vise/skjule rows i tabel

Bare et forslag:

Er det ikke lidt nemmere at bruge radiobuttons, for hvis du giver dem alle tre det samme Name, kan du automatisk kun vælge én af dem!

Jo hvis det er muligt at lave radiobuttons der ser ud som checkboxes ;)

Af hensyn til sidens indhold, skal det være checkboxes.

ok, det tror jeg ikke det er!

Jeg lavede lige din kode lidt kønnere:

<script language="JavaScript">
function wipe(cbox){
  group = eval('document.form1.'+cbox.name);
  for(i=0;group.length>i;i++){
    if(cbox!=group[i])group[i].checked=false;
  }
}
</script>

<form name="form1">
<input name="m1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m1" type="checkbox" value="true" onClick="wipe(this)">
</form>

-- men jeg har ikke forstået, hvordan man bestemmer hvilke rækker som vises og hvad det er for et indhold som ikke skal vises ?-)

Som udgangspunkt er du nødt til at indkapsle det som skal vises/skjules i et eller andet, hvis det er tekst, hvis det er felter kan de skjules direkte ...

-- og hvad betyder det, at det 'ikke ser ud som om der er en masse tomme rows' -- vil du have dem til nærmest at være forsvundne ?-)

Altså, at man faktisk ikke kan se, at der skulle være en række ?o]

Kan godt se at din omskrivning virker umiddelbart, men hvad sker der så på post siden ? Der kan man vel ikke se hvilken af de tre checkboxes i gruppen der er blevet checked ?

Mht. det der skal vises/skjules, havde jeg forestillet mig en tabel, men det kan sikkert også være noget andet. I øjeblikket har jeg på min side (i lettere simplificeret form):

<table width="280" border="0">
  <tr>
    <td>1. col</td>
    <td>2. col</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="s1-1" value="checkbox">1. row</td>
    <td><input name="a1-1" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="s1-2" value="checkbox">2. row</td>
    <td><input name="a1-2" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="s1-3" value="checkbox">3. row</td>
    <td><input name="a1-3" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
</table>

Hvis nu der er afkrydsninger i en gruppe, skal 1. række vises, hvis der er afkrydsninger i to grupper, skal 2. række vises osv. Hvis 1. række ikke skal vises, skal der ikke være en "tom" række midt i tabellen, den skal se ud som om at der kun er to rækker.

>>Det har du helt ret i, der er en konflikt mellem javascript og post-aflæsning, for den måde jeg gør det på kunne man også aflæse post, hvis de var navngivet explicit (ie. m1[0] osv.), men det kan javascript ikke arbejde med ...

-- men så ville jeg gøre:

<script language="JavaScript">
function wipe(cbox){
  id = cbox.name.substring(0,2);
  f = cbox.form;
  for(i=0;f.elements.length>i;i++){
    if(f.elements[i].name.indexOf(id)==0){
      if(cbox!=f.elements[i])f.elements[i].checked=false;
    }
  }
}
</script>

<form name="form1">
<input name="m1s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m1s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m1s3" type="checkbox" value="true" onClick="wipe(this)">
</form>

-- skal lige arbejde lidt på resten ...

Sådan -- den er godt nok avanceret, men virker helt uproblematisk og skulle være uendelig skalerbar, sålænge du holder dig indenfor formen ...

<script language="JavaScript">
var num = [0,0,0];//vil selvfølgelig være lig med antallet af rækker, som skal skjules/vises
function wipe(cbox){
  id = +cbox.name.substring(1,2);
  num[id-1] = (cbox.checked)?1:0;
  f = cbox.form;
  for(i=0;f.elements.length>i;i++){
    if(f.elements[i].name.indexOf('m'+id)==0){
      if(cbox!=f.elements[i])f.elements[i].checked=false;
    }
  }
  var antal = 0;
  for(i=0;num.length>i;i++){
      antal+=num[i];
      document.getElementById('tr'+i).style.display='none';
  }
  document.getElementById('tr'+(antal-1)).style.display='block';
}
</script>

<form name="form1">Gruppe 1:<br>
<input name="m1s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m1s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m1s3" type="checkbox" value="true" onClick="wipe(this)">
<br><br>Gruppe 2:<br>
<input name="m2s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m2s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m2s3" type="checkbox" value="true" onClick="wipe(this)">
<br><br>Gruppe 3:<br>
<input name="m3s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m3s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m3s3" type="checkbox" value="true" onClick="wipe(this)">
<br><br>
<table width="280" border="0">
  <tr>
    <td>1. col</td>
    <td>2. col</td>
  </tr>
  <tr id="tr0" style="display:none;">
    <td><input type="checkbox" name="s1-1" value="checkbox">1. row</td>
    <td><input name="a1-1" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
  <tr id="tr1" style="display:none;">
    <td><input type="checkbox" name="s1-2" value="checkbox">2. row</td>
    <td><input name="a1-2" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
  <tr id="tr2" style="display:none;">
    <td><input type="checkbox" name="s1-3" value="checkbox">3. row</td>
    <td><input name="a1-3" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
</table>
</form>

Og der var en lille bug:

  if(antal>0)document.getElementById('tr'+(antal-1)).style.display='block';

skal erstatte linjen, hvor der står det samme uden if(antal>0)

Ser fint ud, der er dog et par problemer:
1. Funktionen virker ikke hvis tallet mellem m og s er længere end 1 tegn (f.eks. m21s1). Jeg har op til 120 grupper af tre checkboxes.
2. Fejl i linien (antal+=num[i];) "Et objekt er obligatorisk". Virker dog fint hvis jeg bare tager din kode. Jeg har sat antallet op i "var num = [0,0,0...,0]".
3. Kører meget langsomt. Ca. et halvt sekund inden den fjerner check i box. Dette skyldes nok at der f.eks. er 360 checkboxes den skal løbe igennem. Tror min oprindelige løsning er bedre til dette ?

1. Den skal jeg lige lure på ...

2. ?? Den tager jo præcis og tæller antallet af variable i num[], hvordan kommer den til at mangle noget ?-)
  Er det monstro i linjen efter, har du givet alle de tabelrækker som skal skjules fortløbende id'er ?-)

3. Det er snarere alle de requests på tr vha. id'er, som tager den lange tid, for en form skulle være hurtig at tælle igennem, men du kan jo teste ved at sætte en alert ind foran linjen 'var antal ' ...

-- Jeg lægger lige hjernen i blød !-)

Og lige en anden ting, det er ikke altid at den første gruppe har nummer 1, den kan f.eks. hedde m21s1. Jeg tror det er det der giver problemet med 2.
Jeg har prøvet at fjerne det med request på tr, og hastigheden blev ikke bedre, altså må det være checkboxene ?

Har løst 2'eren, det skyldes selvfølgelig at jeg ikke havde nok tabelrækker.

Men problemet med at den første gruppe ikke hedder 1 er der stadig.

Har du alle dine checboxe i grupper af 3 ?-)

Ja og de hedder altid mxs1, mxs2 og mxs3, hvor x så varierer fra 1-120, og kan som sagt starte ved et højere nummer end 1

Nu har jeg lavet en, som tager udgangspunkt i at nummer-følgen starter højere end 1, men hvis de ikke kommer i rækkefølge, skal det tælleværk bare væk ...

-- jeg har også valgt en fuldstændig anderledes algoritme til at finde gruppen på ...

I sig selv er den _meget_ langsommere, men den skulle sagtens kunne udkonkurere gennemgang af 360 elementer:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Checkbox-grupper og tabelrækkeskjul</title>
<script language="JavaScript">
var num = [0,0,0];//vil selvfølgelig være lig med antallet af rækker, som skal skjules/vises
var start = 21;
function wipe(cbox){
    var s = cbox.name.indexOf("s");
  var id = +cbox.name.substring(1,s);
  num[id-start] = (cbox.checked)?1:0;
  var f = cbox.form;
    var nam = cbox.name.substring(0,s+1);
    var b = null;
    for(var i=1;4>i;i++){
        b = eval('f.elements.'+nam+i)
    if(cbox!=b)b.checked=false;
  }
  var antal = 0;
  for(i=0;num.length>i;i++){
      antal+=num[i];
      document.getElementById('tr'+i).style.display='none';
  }
  if(antal>0)document.getElementById('tr'+(antal-1)).style.display='block';
}
</script>
</head>
<body>
<form name="form1">Gruppe 1:<br>
<input name="m21s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m21s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m21s3" type="checkbox" value="true" onClick="wipe(this)">
<br><br>Gruppe 2:<br>
<input name="m22s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m22s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m22s3" type="checkbox" value="true" onClick="wipe(this)">
<br><br>Gruppe 3:<br>
<input name="m23s1" type="checkbox" value="true" onClick="wipe(this)">
<input name="m23s2" type="checkbox" value="true" onClick="wipe(this)">
<input name="m23s3" type="checkbox" value="true" onClick="wipe(this)">
<br><br>
<table width="280" border="0">
  <tr>
    <td>1. col</td>
    <td>2. col</td>
  </tr>
  <tr id="tr0" style="display:none;">
    <td><input type="checkbox" name="s1-1" value="checkbox">1. row</td>
    <td><input name="a1-1" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
  <tr id="tr1" style="display:none;">
    <td><input type="checkbox" name="s1-2" value="checkbox">2. row</td>
    <td><input name="a1-2" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
  <tr id="tr2" style="display:none;">
    <td><input type="checkbox" name="s1-3" value="checkbox">3. row</td>
    <td><input name="a1-3" type="text" value="0" size="10" maxlength="10"></td>
  </tr>
</table>
</form>
</body>
</html>

Ser sgu godt ud, mange tak for hjælpen. Svar -> point

Velbekomme '-)

-- og tak for points ;~}

Nu er jeg lige stødt på et nyt problem med dette script. Jeg vælger nogle checkboxes, og trykker på submit knappen. Nu finder jeg så ud af at indtastningen var forkert, og trykker på tilbage knappen i browseren. Det der sker nu er at checkboxene stadig er checket af, men umiddelbart ser det ud til at arrayet "num" er nulstillet ?
Jeg smider gerne 10-20 point (alt efter hvor svært det er at løse) oven i for at få løst dette problem.

Lige meget, jeg har løst det med noget body onload="init()".

Bueno !-)