Checkboxen wählt Checkbox

[Bayernfreund]

Hallo
Ich möchte für meine Website eine Auswahlmöglichkeit mit mehreren Checkboxen einrichten. Die Funktionsweise ist so daß man jede Checkbox einzeln auswählen kann. Außerdem kann man durch Anklicken der darüber liegenden Checkbox mehrere Checkboxen gleichzeitig mit Auswählen.

z.B.. bei Deutschland ---- alle Checkboxen
               Bayern ----------- alle bayerischen Checkboxen
               Lkr Passau ----- alle Checkboxen im Lkr Passau

Das funktioniert alles hervorragend. Mich stört dabei allerdings dieses alte Skript. Kann man das vielleicht auch anders lösen?

Kann man auch wenn alle Checkboxen gecheckt sind und ich z.B. in diesem Fall bei Pocking den Haken entferne, das auch beim Landkreis Passau, Bayern und Deutschland der Haken entfernt wird?

<input type="checkbox" id="alle"><font face="Arial"><span style="font-size:11pt;"><b>Deutschland</b></span></font><p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    <input type="checkbox" id="alle/Niedersachsen">              <font face="Arial"><span style="font-size:11pt;"><b>Niedersachsen</b></span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Hannover">     <font face="Arial"><span style="font-size:11pt;"   >Hannover</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Braunschweig"> <font face="Arial"><span style="font-size:11pt;"   >Braunschweig</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Osnabruck">    <font face="Arial"><span style="font-size:11pt;"   >Osnabr&uuml;ck</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Oldenburg">    <font face="Arial"><span style="font-size:11pt;"   >Oldenburg</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Gottingen">    <font face="Arial"><span style="font-size:11pt;"   >G&ouml;ttingen</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Hildesheim">   <font face="Arial"><span style="font-size:11pt;"   >Hildesheim</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Wolfsburg">    <font face="Arial"><span style="font-size:11pt;"   >Wolfsburg</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Niedersachsen/Salzgitter">   <font face="Arial"><span style="font-size:11pt;"   >Salzgitter</span></font><p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                                                  <input type="checkbox" id="alle/Bayern">                      <font face="Arial"><span style="font-size:11pt;"><b>Bayern</b></span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    <input type="checkbox" id="alle/Bayern/Munchen">                  <font face="Arial"><span style="font-size:11pt;"   >M&uuml;nchen</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    <input type="checkbox" id="alle/Bayern/Nurnberg">             <font face="Arial"><span style="font-size:11pt;"   >N&uuml;rnberg</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    <input type="checkbox" id="alle/Bayern/Wurzburg">          <font face="Arial"><span style="font-size:11pt;"   >W&uuml;rzburg</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                    <input type="checkbox" id="alle/Bayern/Passau">          <font face="Arial"><span style="font-size:11pt;"   >Landkreis Passau</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Bayern/Passau/Vilshofen">     <font face="Arial"><span style="font-size:11pt;"   >Vilshofen an der Donau</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Bayern/Passau/Griesbach"> <font face="Arial"><span style="font-size:11pt;"   >Bad Griesbach i.Rottal</span></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Bayern/Passau/Pocking">   <font face="Arial"><span style="font-size:11pt;"   >Pocking</span></font><p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Berlin"> <font face="Arial"><span style="font-size:11pt;"><b>Berlin</b></span></font><p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="alle/Hamburg"> <font face="Arial"><span style="font-size:11pt;"><b>Hamburg</b></span></font><p>

<script type="text/javascript">
document.body.onclick = function(e) {
var evO = getEventObject(e);
if(evO.nodeName == 'INPUT' && evO.type == 'checkbox') {
var val = evO.id;
var isChecked = evO.checked;
var inputs = document.getElementsByTagName('input');
for(i=0; i < inputs.length; i++) {
if(inputs[i].type == 'checkbox' && inputs[i] != evO && inputs[i].id.substr(0, val.length) == val) {
inputs[i].checked = isChecked;
}
}
}
}
function getEventObject(e) {
if(window.ActiveXObject) {
return window.event.srcElement;
}
else {
if(e.target.nodeName == "#text") {
return e.target.parentNode;
}
else {
return e.target;
}
}
}
</script>

[Encoder]

Mich stört dabei allerdings dieses alte Skript.

Das ganze HTML sieht elend alt aus.

Kann man das vielleicht auch anders lösen?

Klar. "man" bist in dem Fall du :-)
Du kannst das alles so programmieren wie du es grad beschreibst. Ansätze mit aktuellem javascript findest du in Google sicher sehr viele.

Wobei ich eine Checkbox zum anhaken anderer Checkboxen ungeschickt finde. Die hakt man an, dann hakt man die anderen wieder ab und schon passts nimmer zusammen.

[Whouzuo]

Wobei ich eine Checkbox zum anhaken anderer Checkboxen ungeschickt finde. Die hakt man an, dann hakt man die anderen wieder ab und schon passts nimmer zusammen.

Ist aber sehr praktisch, z.B. um alle 100 Spammails zu löschen, außer den zwei Mails, die ausversehen im Spam Ordner gelandet sind.

[Encoder]

Wobei ich eine Checkbox zum anhaken anderer Checkboxen ungeschickt finde. Die hakt man an, dann hakt man die anderen wieder ab und schon passts nimmer zusammen.

Ist aber sehr praktisch, z.B. um alle 100 Spammails zu löschen, außer den zwei Mails, die ausversehen im Spam Ordner gelandet sind.

Ja der Mechanismus an sich zum "alle markieren" und Markierung wieder aufheben ist natürlich sinnvoll. Aber ich würde das lieber über einen Button lösen als über eine Checkbox. Der Markiervorgang ist doch eigentlich nur eine momentage Aktion ohne dass man diesen Zustand in einer Checkbox dauerhaft anzeigen kann. Es stimmt ja nicht mehr sobald man einzelne Elemente wieder un-checkt.

[Vinzenz Mai]

Hallo,

Ja der Mechanismus an sich zum "alle markieren" und Markierung wieder aufheben ist natürlich sinnvoll. Aber ich würde das lieber über einen Button lösen als über eine Checkbox. Der Markiervorgang ist doch eigentlich nur eine momentage Aktion ohne dass man diesen Zustand in einer Checkbox dauerhaft anzeigen kann. Es stimmt ja nicht mehr sobald man einzelne Elemente wieder un-checkt.

genau deswegen möchte der Bayernfreund ja auch in diesem Fall die Häkchen in den übergeordneten "Check-All-Checkboxen" entfernen :-)

Folgende ungetestete Erweiterung des bestehenden Codes

document.body.onclick = function(e) {  
  var evO = getEventObject(e);  
  if(evO.nodeName == 'INPUT' && evO.type == 'checkbox') {  
    var val = evO.id;  
    var isChecked = evO.checked;  
    var inputs = document.getElementsByTagName('input');  
    for(i=0; i < inputs.length; i++) {  
      if(inputs[i].type == 'checkbox' && inputs[i] != evO && inputs[i].id.substr(0, val.length) == val) {  
        inputs[i].checked = isChecked;  
      }  
      /* Beginn Erweiterung */  
      // Entferne, falls nötig, Häkchen in den übergeordneten Bereichscheckboxen  
      // Diese sind vom Typ "checkbox",  
      // sind nicht das angeklickte Element,  
      // ihre id ist von vorn in der id des angeklicketen Elementes enthalten  
      // das angeklickte Element darf nicht angehakt sein  
      if(inputs[i].type == 'checkbox' && inputs[i] != evO && val.substr(0, inputs[i].id.length) == inputs[i].id && !isChecked ) {  
        inputs[i].checked = false;  
      }  
      /* Ende Erweiterung */  
    }  
  }  
}  

sollte es tun.

Freundliche Grüße

Vinzenz

[Gunnar Bittersmann]

@@Bayernfreund:

nuqneH

<font face="Arial"><span style="font-size:11pt;">

Was ist das denn? Du kennst CSS?

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Was ist das denn? Du kennst CSS?

Öhm, kann es sein, dass du Herbert heißt?

Qapla'