[FRAGE] Checkboxen leeren bei Select Menü!

[ManiaMika]

Hallo zusammen,

Bin keine Leuchte in Sachen Javascript. Dennoch hab ich ein kleines Problem womit ich mich seit Tagen rumquäle.
Vielleicht könnt ihr mir helfen

Habe ein Select Menü womit ich jeweils Checkboxen per disabled="true" style="display:none" verborgen hab, die bei der Auswahl angezeigt werden. Soweit so gut.
Wenn ich jetzt bei einer Auswahl die Checkboxen angeklickt habe und ich möchte dann doch die 2. Auswahl, sollten die angeklicken Checkboxen auch wieder geleert werden ohne einen zusätzlichen Resetbutton. Wie kann ich das realisieren?

<script type="text/javascript">
function refreshPrice() {
    var serverTool = document.getElementById('tool').value;

    if (serverTool === 'pro1') {
        setool ="produ1"; }      
    if (serverTool === 'pro2') {
        setool ="produ2"; }

    // Update checkboxes
    var i, prNodes = document.getElementById('pr').getElementsByTagName('div');
    for (i = 0; i < prNodes.length; ++i) {
        prNodes[i].style.display = 'none';
    }
    document.getElementById('pr_' + setool).style.display = 'block';
    }

window.setTimeout('refreshPrice()', 1);
</script>

<div id="form" >						 
<select id="tool" onchange="refreshPrice();" >
    <option value="">bitte wählen!</option>
    <option value="pro1">Produkt 1</option>
    <option value="pro2">Produkt 2</option>                      
</select>								  
<div id="pr" >
   <div id="pr_produ1" disabled="true" style="display:none" >
   <u>Produkt 1</u></br>  
   <input type="checkbox" > Pro1
   <input type="checkbox" > Pro2                                    
   </div> 
   
   <div id="pr_produ2" disabled="true" style="display:none" >
   <u>Produkt 2</u></br>	  
   <input type="checkbox" > Pro3                  
   <input type="checkbox" > Pro4         
   </div>
</div>
</div>

 

[j-l-n]

Habe ein Select Menü womit ich jeweils Checkboxen per disabled="true" style="display:none" verborgen hab, die bei der Auswahl angezeigt werden. Soweit so gut.
Wenn ich jetzt bei einer Auswahl die Checkboxen angeklickt habe und ich möchte dann doch die 2. Auswahl, sollten die angeklicken Checkboxen auch wieder geleert werden ohne einen zusätzlichen Resetbutton. Wie kann ich das realisieren?

Ich würde dir gerne helfen, aber ich weiß nicht, ob ich dich richtig verstanden habe... Meintest du, dass - wenn man im Select erst Produkt 1 wählt, dort eine Checkbox anklickt und dann doch Produkt 2 wählt - dann in diesem die Auswahl nicht beibehalten wird?

 

[ManiaMika]

hi Julian,

ja genau. Egal welches Produkt ich im Selectmenü anklicke, keines der angeklickten Checkboxen soll stehen bleiben beim wechsel.

 

[j-l-n]

Ich habe jetzt gleich mal dein gesamtes Skript überarbeitet:

function switch_selectoptions(select_id, select_div_id, div_prefix) {

		var selected = document.getElementById(select_id).value;

		var selectoptions = document.getElementById(select_div_id).getElementsByTagName('div');
	
		for(var x=0; x < selectoptions.length; x++) {
			selectoptions[x].style.display = 'none';
		}
		
		function uncheck_checkboxes() {
			var input_elements = document.getElementById(select_div_id).getElementsByTagName("input");
			for(var nr=0; nr < input_elements.length; nr++) {
				if(input_elements[nr].type == 'checkbox') {
					input_elements[nr].checked = false;
				}
			}
		}
		
		uncheck_checkboxes();
		
		document.getElementById(div_prefix + selected).style.display = 'block';
  
    }

Die Funktion erwartet drei Paramter, und zwar:

switch_selectoptions('[ID des select-Tags]', '[ID des divs, der die divs mit den Checkboxen enthält]', '[Präfix*]');

*Wichtiges zum Präfix: die jeweiligen "value" des Select-Menüs und die divs mit den Checkboxen sind miteinander verknüpft.
Wählt man bspw. im Select die Option mit value "pro1", so wird der div mit der ID "menu_pro1" angezeigt. Das Präfix wäre also "menu_".

Livedemo: Unterschiedliche Checkboxen durch Select-Auswahl


PS: Man sollte keine globalen Variablen wie hier

if (serverTool === 'pro2') {
    setool ="produ2";
}

verwenden!

PPS: Den Timeout

window.setTimeout('refreshPrice()', 1);

braucht man absolut gar nicht...

PPPS: Das

<div disabled="true">

ist Schwachsinn

 

[ManiaMika]

wow Julian, du bist einer von den fleißigen
Das es doch so komplex wird, hab ich nicht gedacht. Ich werd das mal bei mir testen wenn ich Zeit habe.
Vorerst Danke ich dir schonmal.

Ach dein Livedemo funktioniert nicht

 

[j-l-n]

wow Julian, du bist einer von den fleißigen Vorerst Danke ich dir schonmal.

Gern geschehen - schön, dass ich dir helfen konnte!

Ach dein Livedemo funktioniert nicht

Sorry, da war die Subdomain und das Verzeichnis doppelt drinnen. Probier's mal jetzt aus, ich hab oben den Link aktualisiert :icon7: