Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 22
  1. #1
    FrankSchwab ist offline Grünschnabel
    registriert
    08-06-2012
    Beiträge
    5

    Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Hallo,

    ich möchte in Abhängigkeit der Auswahl der ComboBox - onchange() - unterschiedliche Checkbox innerhalb des gleichen HTML Formulars anzeigen

    Jemand eine Idee, wie ich das effizient machen kann?

    // Hier die ComboBox:

    <select name="ComboBoxDomain">
    <option value="1">Auswahl A</option>
    <option value="2">Auswahl B</option>
    <option value="3">Auswahl C</option>
    <option value="4">Auswahl D</option>
    <option value="5">Auswahl E</option>
    </select>

    // Hier die drei unterschiedlichen CheckBoxes, die ich in Abhängigkeit von der ComboBox Auswahl im gleichen Formular anzeigen möchte

    // CheckBox Serie A, falls Auswahl A

    <input name="CheckBox-A-Nr-1" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:0px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:0px; width:150px; height:20px">CheckBox-A-Nr-1</div>
    <input name="CheckBox-A-Nr-2" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:30px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:30px; width:150px; height:20px">CheckBox-A-Nr-2</div>
    <input name="CheckBox-A-Nr-3" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:60px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:60px; width:150px; height:20px">CheckBox-A-Nr-3</div>
    <input name="CheckBox-A-Nr-4" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:90px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:90px; width:150px; height:20px">CheckBox-A-Nr-4</div>

    // CheckBox Serie B, falls Auswahl B

    <input name="CheckBox-B-Nr-1" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:0px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:0px; width:150px; height:20px">CheckBox-B-Nr-1</div>
    <input name="CheckBox-B-Nr-2" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:30px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:30px; width:150px; height:20px">CheckBox-B-Nr-2</div>
    <input name="CheckBox-B-Nr-3" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:60px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:60px; width:150px; height:20px">CheckBox-B-Nr-3</div>

    // CheckBox Serie C, falls Auswahl C

    <input name="CheckBox-C-Nr-1" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:0px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:0px; width:150px; height:20px">CheckBox-C-Nr-1</div>
    <input name="CheckBox-C-Nr-2" type="checkbox" value="" title="" style="overflow:hidden; position:absolute; left:150px; top:30px; width:20px; height:20px; " >
    <div style= "position:absolute; left:175px; top:30px; width:150px; height:20px">CheckBox-C-Nr-2</div>

  2. #2
    Avatar von scrypter
    scrypter ist offline Haudegen
    registriert
    25-06-2011
    Beiträge
    706

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    ohne die Anforderungen (shop o.ä.) genau zu kennen kann man nur in die grobe Richtung weisen
    sicherlich sind noch weitere Prüfbedingungen notwendig, um die Fernsteuerung der checkboxen zu verfeinern bzw. zu optimieren

    hier, als eine von vielen Möglichkeiten, ein grobes "alle AUS" und danach "entsprechende Boxen wieder AN" Beispiel
    Code:
    function checkThem(node) {
    	var boxes = document.getElementsByTagName('input');
    	for (var i=0; i<boxes.length; i++) {
    		if (boxes[i].type == 'checkbox' && boxes[i].attributes['class']) {
    			boxes[i].checked = false;
    		}
    	}
    	switch(parseInt(node.value)) {
    		case 1:
    			for (var i=0; i<boxes.length; i++) {
    				if (boxes[i].type == 'checkbox' && boxes[i].attributes['class'] && boxes[i].className == 'option_A') {
    					boxes[i].checked = true;
    				}
    			}
    			break;
    		case 2:
    			for (var i=0; i<boxes.length; i++) {
    				if (boxes[i].type == 'checkbox' && boxes[i].attributes['class'] && boxes[i].className == 'option_B') {
    					boxes[i].checked = true;
    				}
    			}
    			break;
    		case 3:
    			for (var i=0; i<boxes.length; i++) {
    				if (boxes[i].type == 'checkbox' && boxes[i].attributes['class'] && boxes[i].className == 'option_C') {
    					boxes[i].checked = true;
    				}
    			}
    			break;
    	}
    }
    HTML-Code:
    <select id="select1" name="ComboBoxDomain" onchange="checkThem(this)">
    	<option value="0">bitte w&auml;hlen</option>
    	<option value="1">Auswahl A</option>
    	<option value="2">Auswahl B</option>
    	<option value="3">Auswahl C</option>
    	<option value="4">Auswahl D</option>
    	<option value="5">Auswahl E</option>
    </select>
    
    <fieldset>
    	<legend>checkboxes A</legend>
    	<input name="cb_A1" type="checkbox" class="option_A">
    	<input name="cb_A2" type="checkbox" class="option_A">
    	<input name="cb_A3" type="checkbox" class="option_A">
    	<input name="cb_A4" type="checkbox" class="option_A">
    </fieldset>
    
    <fieldset>
    	<legend>checkboxes B</legend>
    	<input name="cb_B1" type="checkbox" class="option_B">
    	<input name="cb_B2" type="checkbox" class="option_B">
    	<input name="cb_B3" type="checkbox" class="option_B">
    </fieldset>
    
    <fieldset>
    	<legend>checkboxes C</legend>
    	<input name="cb_C1" type="checkbox" class="option_C">
    	<input name="cb_C2" type="checkbox" class="option_C">
    </fieldset>
    @edit: im html die option 0 ergänzt
    Geändert von scrypter (08-06-2012 um 18:41 Uhr)

  3. #3
    FrankSchwab ist offline Grünschnabel
    registriert
    08-06-2012
    Beiträge
    5

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Hallo scrypter,

    erst einmal vielen Dank für die schnelle und elegante Antwort.

    Was ich allerdings versuche darzustellen ist folgendes:

    Erst mit Auswahl eines Elementes der ComboBox (Standardeinstellung: keine Auswahl) werden die Checkboxen A, B oder C angezeigt.

    D.h. Es werden gar keine Checkboxen gezeigt, wenn keine Auswahl eines Elements der ComboBox getroffen wird.
    Es werden nur die Checkboxen A gezeigt, falls ComboBox "Auswahl A",
    es werden nur die Checkboxen B gezeigt, falls ComboBox "Auswahl B",
    usw.

    Dein Code zeigt alle Checkboxen gleichzeitig an und setzt, je nach Auswahl, alle Haken.


    Was die Anforderung ist zeige ich hier, sobald ich es hinkriege ...

  4. #4
    Avatar von scrypter
    scrypter ist offline Haudegen
    registriert
    25-06-2011
    Beiträge
    706

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    sorry, das habe ich falsch verstanden

    Du kannst die Elemente, die nicht angezeigt werden sollen per css ausschalten

    entweder mit visibility: hidden bzw. visible oder per display: none bzw. inline / block / inline-block
    Unterschied ist, ob der Platz den das Element benötigt vom browser bei der Anzeige der nachfolgende Elemente berücksichtigt wird oder nicht
    bei visibility: hidden; wird der Platzbedarf berücksichtigt, auch wenn das Element unsichtbar ist
    bei display:none; rücken die nachfolger entsprechend auf, weil das ausgeblendete Element keinen Platzbedarf hat

    das Einblenden erfolgt dann bei onchange ähnlich wie in meinem checked-Beispiel entweder über Klassen oder gezielt über ID's, abhängig davon, ob das Element eingeblendet ist oder nicht oder was Du sonst noch als Bedingung haben möchtest

    dazu musst Du die .style Eigenschaft ansprechen: .style.display oder .style.visibility

    evtl. brauchst Du zur Prüfung document.getElementById('elementID').currentStyle.visibility bzw. .display (beim IE) oder
    window.getComputedStyle(document.getElementById('elementID'), '').getPropertyValue('visibility') bzw. ('display') (für Netscape)

    statt mit document.getElementById('elementID') kannst Du die Elemente natürlich auch mit anderen Methoden ansprechen:
    .getElementsByTagName('input') oder .getElementsByName('cb_A1')

  5. #5
    justanotheruser ist offline Doppel-As
    registriert
    10-05-2012
    Ort
    Bad Frankenhausen
    Beiträge
    145

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Also wenn es nur um Ein- und Ausblenden geht, wäre der leichteste Ansatz wohl sowas in der Art:

    Alle Checkboxen jeweils in einen DIV Container packen und dann


    PHP-Code:

    var checkBoxContainerIds = ["idAuswahl1","idAuswahl2","idAuswahl3"];


    deineSelectbox.onchange = function(){
       var 
    id;
       
    // wert auslesen bzw ID ermittlen

      
    for(var i=0max checkBoxContainerIds.lengthmaxi+=1)
        {
        
    document.getElementById(checkBoxContainerIds[i]).style.display = (id == checkBoxContainerIds[i]) ? "" "none";
        }


  6. #6
    FrankSchwab ist offline Grünschnabel
    registriert
    08-06-2012
    Beiträge
    5

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Ja, danke. Das hilft mir auf die Sprünge. Tatsächlich will ich eigentlich die CheckBoxen in Abhängigkeit der ComboBox nur ein- und ausblenden, da ich die Werte brauche.

    Lösung zeige ich, sobald ich das ganze habe ...

  7. #7
    FrankSchwab ist offline Grünschnabel
    registriert
    08-06-2012
    Beiträge
    5

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Nicht besonders elegant, aber macht genau das, was ich will ...

    Wenn ich die CheckBoxen jeweils in einen div Container packe, dann sollte das mit den Schleifen auch eleganter zu lösen sein ...


    <!DOCTYPE html>
    <html>
    <head>

    <script type="text/javascript">

    function hideCheckBoxesA(){
    // CheckBoxen A ausblenden
    for(var i=1; i < 9; i+=1)
    {
    document.getElementById(i).style.display = 'none';}
    };

    function hideCheckBoxesC(){
    // CheckBoxen A ausblenden
    for(var i=10; i < 14; i+=1)
    {
    document.getElementById(i).style.display = 'none';}
    };

    function showCheckBoxesA(){
    // CheckBoxen C ausblenden
    hideCheckBoxesC();
    // CheckBoxen A einblenden
    for(var i=1; i < 9; i+=1)
    {
    document.getElementById(i).style.display = 'inline';}
    };


    function showCheckBoxesC(){
    // CheckBoxen A ausblenden
    hideCheckBoxesA();
    // CheckBoxen C einblenden
    for(var i=10; i < 14; i+=1)
    {
    document.getElementById(i).style.display = 'inline';}

    };


    function showSelectedCheckBoxes(){

    if (document.getElementById(20).value==1)
    showCheckBoxesA();

    if (document.getElementById(20).value==3)
    showCheckBoxesC();

    };


    </script

    </head>

    <body>


    <input name="CheckBox-A-Nr-1" id=1 type="checkbox" value="" title="" style="display:none; overflow:hidden; position:absolute; left:150px; top:0px; width:20px; height:20px; " >
    <div id=2 style= "display:none; position:absolute; left:175px; top:0px; width:150px; height:20px">CheckBox-A-Nr-1</div>
    <input name="CheckBox-A-Nr-2" id=3 type="checkbox" value="" title="" style="display:none; overflow:hidden; position:absolute; left:150px; top:30px; width:20px; height:20px; " >
    <div id=4 style= "display:none; position:absolute; left:175px; top:30px; width:150px; height:20px">CheckBox-A-Nr-2</div>
    <input name="CheckBox-A-Nr-3" id=5 type="checkbox" value="" title="" style="display:none; overflow:hidden; position:absolute; left:150px; top:60px; width:20px; height:20px; " >
    <div id=6 style= "display:none; position:absolute; left:175px; top:60px; width:150px; height:20px">CheckBox-A-Nr-3</div>
    <input name="CheckBox-A-Nr-4" id=7 type="checkbox" value="" title="" style="display:none; overflow:hidden; position:absolute; left:150px; top:90px; width:20px; height:20px; " >
    <div id=8 style= "display:none; position:absolute; left:175px; top:90px; width:150px; height:20px">CheckBox-A-Nr-4</div>


    <input name="CheckBox-C-Nr-1" id=10 type="checkbox" value="" title="" style="display:none; overflow:hidden; position:absolute; left:150px; top:0px; width:20px; height:20px; " >
    <div id=11 style= "display:none; position:absolute; left:175px; top:0px; width:150px; height:20px">CheckBox-C-Nr-1</div>
    <input name="CheckBox-C-Nr-2" id=12 type="checkbox" value="" title="" style="display:none; overflow:hidden; position:absolute; left:150px; top:30px; width:20px; height:20px; " >
    <div id=13 style= "display:none; position:absolute; left:175px; top:30px; width:150px; height:20px">CheckBox-C-Nr-2</div>



    <select name="ComboBoxDomain" id=20 onchange="showSelectedCheckBoxes()">
    <option value="1">Auswahl A</option>
    <option value="2">Auswahl B</option>
    <option value="3">Auswahl C</option>
    <option value="4">Auswahl D</option>
    <option value="5">Auswahl E</option>
    </select>




    </body>
    </html>

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.627

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    1. Bitte verwende doch [code]-Tags - dann kann man den Code auch besser lesen.
    2. Zwei Funktionen für ein und die selbe Funktionalität zu verwenden ist nicht besonders elegant und sehr wartungsintensiv. Dafür gibt es in JS (und auch anderen Programmiersprachen Parameter). In deinem Fall würde ich eine Funktion bauen, die als Parameter den Anfangswert und den Stopwert der Schleife bekommt.
    3. IDs dürfen nicht mit einer Zahl beginnen und damit natürlich auch nicht einfach nur eine Zahl sein.

  9. #9
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    4. Es gibt keine Combobox in HTML - das ist eine normale ListBox

  10. #10
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.630

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    mit <select size="1"> hast du eine ComboBox

  11. #11
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    D.h. dann ist es möglich dort Text einzutippen? Das wäre mir aber neu.

  12. #12
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.630

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    nein, hat aber nichts damit zu tun, das es kein textfeld ist. das kann man immer auf read only setzen und wird in den meisten fällen wohl auch gemacht, da man nur die in der dropdownliste angegebenen werte zulassen möchte.

  13. #13
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Zitat Zitat von hesst Beitrag anzeigen
    nein, hat aber nichts damit zu tun, das es kein textfeld ist. das kann man immer auf read only setzen und wird in den meisten fällen wohl auch gemacht, da man nur die in der dropdownliste angegebenen werte zulassen möchte.
    Naja, aber eine Combobox ist eine ListBox in Verbindung mit einem Textfeld. Wie z.b. die Engabeleiste im Browser.

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.627

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    @ein schlauer: es gibt in HTML5 eine Combobox in deinem Sinne:
    Code:
    <label>Homepage: <input name=hp type=url list=hpurls></label>
    <datalist id=hpurls>
     <option value="http://www.google.com/" label="Google">
     <option value="http://www.reddit.com/" label="Reddit">
    </datalist>
    - Beispiel aus http://dev.w3.org/html5/spec/common-...list-attribute

  15. #15
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Checkboxen in Abhängigkeit der Auswahl einer ComboBox anzeigen - wie ?

    Das ist nicht in meinem Sinne, so ist die Definition einer Combobox https://de.wikipedia.org/wiki/Combobox

    Aber ist in diesem Thread eigentlich nur eine Nebenbemerkung, ich wolte nur auf den falschen Begriff aufmerksam machen.

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Auswahl 2 von 3 Checkboxen erlauben
    Von phpmodro im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 17-11-2009, 16:29
  2. Namen in Abhängigkeit von definiertem Wert anzeigen
    Von Albertok im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 31-05-2006, 18:32
  3. Bilder in Abhängigkeit von Text in Tabelle anzeigen?
    Von kabomanni im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 10-04-2006, 10:38
  4. Combobox auf Auswahl checken
    Von mercredi im Forum Allgemeines
    Antworten: 11
    Letzter Beitrag: 21-02-2006, 21:22
  5. Antworten: 3
    Letzter Beitrag: 15-12-2005, 12:15

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •