✔ Dropdown selektiert Checkbox

O

OutOfOrder

Grünschnabel
Hallo zusammen,

erst einmal ich bin ein totaler JavaScript Anfänger und habe auch eigentlich nicht großartig vor viel damit zu arbeiten (ihr JS freaks steinigt mich bestimmt dafür ;) ).

Nun bin ich im moment in der Planung einer Seite und für etwas komfort bräuchte ich doch etwas JS. Es geht um folgendes:

Ich möchte mittels einem Dropdown feld mehrere unterschiedliche Checkboxen aktivieren bzw. Deaktivieren.

Hab auch schon gegoogled aber scheinbar nicht nach den richtigen Begriffen... hab leider keine Ahnung wonach ich genau suchen sollte.

Es wäre nett wenn jemand ein Tutorial für hätte oder mir evtl ein beispiel geben könnte ;-)

Vielen dank im vorraus.
 
Hi,

unter der Annahme, dass alle Checkboxen den gleichen Namen haben, könntest du ein mehrdimensionales Array erstellen. Dieses enthält in der Komponente, die dem Index der gewählten Option entspricht, eine Folge von Nullen und Einsen. Hierbei entspricht eine Eins einer angewählten Checkbox, eine Nulle einer unangewählten.

In einer Schleife werden alle Checkboxen mit gleichem Name durchlaufen und entsprechend des Arrays gesetzt oder nicht gesetzt.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrSel = [[0,0,0,0,0,0],   // Bei Auswahl der ersten Optionen -> keine Checkbox setzen
              [1,0,1,0,1,0],   // Bei Auswahl der zweiten Option -> gerade Checkboxen setzen
              [0,1,0,1,0,1]];  // Bei Auswahl der dritten Option -> ungerade Checkboxen setzen

function selectBoxes(objSel, strName){
  var intIndex = objSel.selectedIndex;
  var arrCB = document.getElementsByName(strName);

  for(var i=0; i<arrCB.length; i++){
    arrCB[i].checked = (arrSel[intIndex][i])? true : false;
  }
}
 //-->
</script>
</head>
<body>
<form>
  <p>
    <select name="selField" onchange="selectBoxes(this, 'cbTest');">
      <option value="">- Wählen -</option>
      <option value="">gerade</option>
      <option value="">ungerade</option>
    </select>
  </p>
  <p>
    <input type="checkbox" name="cbTest" value="Null">Null<br>
    <input type="checkbox" name="cbTest" value="Eins">Eins<br>
    <input type="checkbox" name="cbTest" value="Zwei">Zwei<br>
    <input type="checkbox" name="cbTest" value="Drei">Drei<br>
    <input type="checkbox" name="cbTest" value="Vier">Vier<br>
    <input type="checkbox" name="cbTest" value="Fuenf">Fünf
  </p>
</form>
</body>
</html>

Ciao
Quaese
 
Hi Quaese,

vielen dank für deinen Post. Klappt super genau so wie ich mir das vorgestellt habe ;-)
Vielen vielen dank nochmal.

Gruß
OutOfOrder
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück