RadioBoxen und Checkboxen abhängig voneinander machen

Maxi-Air · 21. Juli 2016

Hallo zusammen,

ich bin Anfänger und beschäftige mich gerade etwas mit HTML und der Erstellung einer Auswahlseite, soweit so standard und soweit klappt das auch... jetzt möchte ich aber, dass man eine größere Anzahl Checkboxen nur abhängig von den vorher ausgewählten Radiobuttons anklicken kann oder nicht. Also Radio 1 ausgewählt, dann Checkboxen 1 bis 15 auswählbar, alle anderen ausgeblendet, bei Radio 2 dann 16-30 und wieder alle anderen nicht mehr wählbar und so weiter....

Ich hab mich also auf diversen Seiten durchgeklickt und auch viel gefunden und ausprobiert, da ich aber bei Java so ziemlich überhaupt keine Ahnung hab, scheitert es teilweise am übertragen aus ähnlichen Modellen

Die Überlegung war, wenn er aus den radios abfragt, bekommt er ja eine Antwort (ID des ausgewählten Radios) und danach dann eine switch Funktion, die demensprechend die "disabled" für eine Gruppe Checkboxes entfernt.

Soweit der Plan, funktioniert leider nicht

Meine Momentane Lösung schaut so aus:

Code:

<html>
<head>
<script type="text/javascript" language="javascript">

var radioAktiv = document.getElementById('myRadio');

switch (radioAktiv) {
    case "OPT1":
      Spalte1.removeAttribute('disabled')
    break;
    case "OPT2":
      Spalte2.removeAttribute('disabled')
    break;
    case "OPT3":
      Spalte3.removeAttribute('disabled')
    break;
    case "OPT4":
      Spalte4.removeAttribute('disabled')
    break;
    default:
      Spalte1.setAttribute('disabled')
	  Spalte2.setAttribute('disabled')
	  Spalte3.setAttribute('disabled')
	  Spalte4.setAttribute('disabled')
    break;
  }




	  </script>
	  </head>
	  <body>
	  
	  
<form action="#.html"> 
<br><label><input type="radio" name="myRadio" id="OPT1" onClick="FKT1();">Exterior </label>
<br><label><input type="radio" name="myRadio" id="OPT2" onClick="FKT2();">Interior</label>
<br><label><input type="radio" name="myRadio" id="OPT3" onClick="FKT3();">Image</label>
<br><label><input type="radio" name="myRadio" id="OPT4" onClick="FKT4();">Other</label>
<br>
<br>
	
    <fieldset id="Spalte1">
	<li> <label> <input type="checkbox" name="OPT11" value="WindowView"> Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT12" value="EngineCloseUp"> Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT13" value="WingView"> Wing View </label> </li> 
    </fieldset>
	<fieldset id="Spalte2">
	<li> <label> <input type="checkbox" name="OPT21" value="WindowView"> Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT22" value="EngineCloseUp"> Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT23" value="WingView"> Wing View </label> </li> 
    </fieldset>
	<fieldset id="Spalte3" disabled>
	<li> <label> <input type="checkbox" name="OPT31" value="WindowView"> Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT32" value="EngineCloseUp"> Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT33" value="WingView"> Wing View </label> </li> 
    </fieldset>
	<fieldset id="Spalte4" disabled>
	<label> <input type="checkbox" name="OPT41" value="WindowView"> Window View </label>
    <label> <input type="checkbox" name="OPT42" value="EngineCloseUp"> Engine Close Up </label>  
    <label> <input type="checkbox" name="OPT43" value="WingView"> Wing View </label>
    </fieldset>
	
	<br><br><br>
	
	 <button type="button" onclick="alert('Upload successfull')">Upload</button>  
	
	
  </form>
	  
	  
	  
	  </body>
	  
	  </html>

Vielen Dank schonmal für eure Hilfe,

Viele Grüße, Max

Dormilich · 21. Juli 2016

da ich aber bei Java so ziemlich überhaupt keine Ahnung hab

spielt eh keine Rolle, was du brauchst ist JavaScript (JS hat rein gar nix mit Java gemein).

Die Überlegung war, wenn er aus den radios abfragt, bekommt er ja eine Antwort (ID des ausgewählten Radios) und danach dann eine switch Funktion, die demensprechend die "disabled" für eine Gruppe Checkboxes entfernt.

Für sinnvoller halte ich folgendes. Jede Gruppe an Checkboxen bekommt eine Klasse entsprechend der Radiobuttons (also Checkboxen 1-15 z.B. 'radio1') (kann auch mehrere Klassen pro Checkbox ergeben, wenn denn die Checkbox bei mehreren Radios aktiv sein soll). Dann einfach entsprechend des gewählten Radio alle Checkboxen sperren und dann alle der passenden Gruppe entsperren.

- - - Aktualisiert - - -

PS. das macht man nicht über setAttribute(), sondern mit {Element}.disabled

Maxi-Air · 21. Juli 2016

Danke für deine Antwort,

ich meinte natürlich JavaScript, obwohl ich von beidem keine Ahnung hab ...

Ich hab jetzt nochmal mit deinem Tipp zur Funktion {Element}.disabled gesucht und probiert, soweit funktioniert es endlich

- leider klappt das mit der Gruppierung nicht, damit werden die Funktionen immer länger, vor allem bei 30 statt 3 check Boxes....

Danke nochmal

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function Exterior()
  {
  document.getElementById("OPT101").disabled=false
  document.getElementById("OPT102").disabled=false
  document.getElementById("OPT103").disabled=false
  document.getElementById("OPT201").disabled=true
  document.getElementById("OPT202").disabled=true
  document.getElementById("OPT203").disabled=true
  document.getElementById("OPT301").disabled=true
  document.getElementById("OPT302").disabled=true
  document.getElementById("OPT303").disabled=true
  document.getElementById("OPT401").disabled=true
  document.getElementById("OPT402").disabled=true
  document.getElementById("OPT403").disabled=true
  
  }
function Interior()
  {
  document.getElementById("OPT101").disabled=true
  document.getElementById("OPT102").disabled=true
  document.getElementById("OPT103").disabled=true
  document.getElementById("OPT201").disabled=false
  document.getElementById("OPT202").disabled=false
  document.getElementById("OPT203").disabled=false
  document.getElementById("OPT301").disabled=true
  document.getElementById("OPT302").disabled=true
  document.getElementById("OPT303").disabled=true
  document.getElementById("OPT401").disabled=true
  document.getElementById("OPT402").disabled=true
  document.getElementById("OPT403").disabled=true
  }
function Image()
  {
  document.getElementById("OPT101").disabled=true
  document.getElementById("OPT102").disabled=true
  document.getElementById("OPT103").disabled=true
  document.getElementById("OPT201").disabled=true
  document.getElementById("OPT202").disabled=true
  document.getElementById("OPT203").disabled=true
  document.getElementById("OPT301").disabled=false
  document.getElementById("OPT302").disabled=false
  document.getElementById("OPT303").disabled=false
  document.getElementById("OPT401").disabled=true
  document.getElementById("OPT402").disabled=true
  document.getElementById("OPT403").disabled=true
  }
 function Other()
  {
  document.getElementById("OPT101").disabled=true
  document.getElementById("OPT102").disabled=true
  document.getElementById("OPT103").disabled=true
  document.getElementById("OPT201").disabled=true
  document.getElementById("OPT202").disabled=true
  document.getElementById("OPT203").disabled=true
  document.getElementById("OPT301").disabled=true
  document.getElementById("OPT302").disabled=true
  document.getElementById("OPT303").disabled=true
  document.getElementById("OPT401").disabled=false
  document.getElementById("OPT402").disabled=false
  document.getElementById("OPT403").disabled=false
  }
</script>
</head>
<body>

<br><label><input type="radio" name="myRadio" onclick="Exterior()">Exterior </label>
<br><label><input type="radio" name="myRadio" onclick="Interior()">Interior</label>
<br><label><input type="radio" name="myRadio" onclick="Image()">Image</label>
<br><label><input type="radio" name="myRadio" onclick="Other()">Other</label>
<br>


<form>

   <p class="Radio1">
	<li> <label> <input type="checkbox" name="OPT11" id="OPT101" value="WindowView" > Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT12" id="OPT102" value="EngineCloseUp" > Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT13" id="OPT103" value="WingView"> Wing View </label> </li> 
    </p>
	<p class="Radio2">
	<li> <label> <input type="checkbox" name="OPT21" id="OPT201" value="WindowView"> Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT22" id="OPT202" value="EngineCloseUp"> Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT23" id="OPT203" value="WingView"> Wing View </label> </li> 
    </p>
	<p class="Radio3">
	<li> <label> <input type="checkbox" name="OPT31" id="OPT301" value="WindowView"> Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT32" id="OPT302" value="EngineCloseUp"> Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT33" id="OPT303" value="WingView"> Wing View </label> </li> 
    </p>
	<p class="Radio4">
	<li> <label> <input type="checkbox" name="OPT41" id="OPT401" value="WindowView"> Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT42" id="OPT402" value="EngineCloseUp"> Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT43" id="OPT403" value="WingView"> Wing View </label> </li>
    </p
</form>




</body>
</html>

paul schmitz · 22. Juli 2016

Vergiss den Weg, wie du das JS schreibst.
Besser wäre eine Funktion, die den entsprechenden Block disabled/nicht disabled.

Code:

function disable(blocksize,block,totalblocks){
  var i,j,isDisabled;//Variablen Deklarieren
  for(i=0;i<totalblocks;++i){
    //Hier wird für jeden Block von Optionen der Code einmal ausgeführt
    for(j=0;j<blocksize;++j){
      //Hier für jeden Eintrag, j ist die hintere Ziffer
      isDisabled=i==block;//Prüfen, ob i der gesuchte Block ist, und das Ergebnis in isDisabled speichern
      document.getElementById("OPT"+i+"0"+j).disabled=!isDisabled;//Den disabled-Wert setzen. Das ! vor isDisabled, weil isDisabled true ist, wenn der Block gefunden wurde, aber false sein soll, weil das Element aktiviert werden soll.
    }
  }
}

//Aufruf
disable(3,1,4);//Jeder Block hat 3 Einträge, der erste Block soll aktiviert werden, es gibt gesamt 4 Blöcke, das macht das gleiche wie deine Funktion Exterior()
disable(100,42,30);//Bei 30 Blöcken mit je 100 Einträgen den 42ten aktivieren

Du könntest sogar die Elemente in JavaScript ausgeben lassen.
Bei deinem HTML fehlt vor den </form> beim </p ein ">".
Das ganze konnte ich noch nicht testen, sollte aber so funktionieren. Von der Geschwindigkeit her ist meins noch nicht optimal, aber das wird dich nicht stören.

andreax · 22. Juli 2016

Ist ja schon eine Coole Lösung von paul schmitz.
Weil ich aber nun seber einige Zeit mit dem Problem verbracht hab
poste ich mal meinen Lösungs-Ansatz. is getestet und läuft.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Radiobutton check</title>
<meta charset="utf-8" />
<style> 
.nos{display:none;}
ul{list-style:none;}
ul span:first-child{font-weight:bold;text-transform:uppercase; color:#900;}
</style>
</head>
<body>
<p>
<br><label><input type="radio" name="myRadio" value="exterior">Exterior </label>
<br><label><input type="radio" name="myRadio"  value="interior">Interior</label>
<br><label><input type="radio" name="myRadio" value="image">Image</label>
<br><label><input type="radio" name="myRadio" value="other">Other</label>
<br>
</p>

<form name="checkform" action="#" method="post">

   <ul id="exterior" >
   <span>Exterior</span>
	<li> <label> <input type="checkbox" name="OPT11" id="OPT101" value="WindowView"  > Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT12" id="OPT102" value="EngineCloseUp"  > Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT13" id="OPT103" value="WingView" > Wing View </label> </li> 
    </ul>
	<ul id="interior" >
	<span>Interior</span>
	<li> <label> <input type="checkbox" name="OPT21" id="OPT201" value="WindowView" > Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT22" id="OPT202" value="EngineCloseUp" > Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT23" id="OPT203" value="WingView" > Wing View </label> </li> 
    </ul>
	<ul id="image" >
	<span>Image</span>
	<li> <label> <input type="checkbox" name="OPT31" id="OPT301" value="WindowView" > Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT32" id="OPT302" value="EngineCloseUp" > Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT33" id="OPT303" value="WingView" > Wing View </label> </li> 
    </ul>
	<ul id="other" >
	<span>Other</span>
	<li> <label> <input type="checkbox" name="OPT41" id="OPT401" value="WindowView" > Window View </label> </li>
    <li> <label> <input type="checkbox" name="OPT42" id="OPT402" value="EngineCloseUp" > Engine Close Up </label> </li>  
    <li> <label> <input type="checkbox" name="OPT43" id="OPT403" value="WingView" > Wing View </label> </li>
    </ul>
	
</form>




<script>
var ew = document.getElementsByName('myRadio');
var rul = document.querySelectorAll('form ul');
var allE = document.querySelectorAll('form  ul li input');
for(var i = 0; i < allE.length; i++){allE[i].disabled = true;} 
var dummyHolder = document.createElement('ul');
dummyHolder.classList.add('nos');

for(var i = 0; i < ew.length;i++)
{
	//rul[i].classList.add('nos');                        /// <1> am anfang alle boxen ausblenden 
	//ew[i].addEventListener('change',radioCheck,true);  /// <2> boxen verstecken und wieder  einblenden
	ew[i].addEventListener('change',checkInOut,true);    ///<3>  boxen enabled und disabled  
													////// zum testen der beiden modi: 1 und 2 einblenden  3 ausblenden | oder umgekehrt 
}

function radioCheck(e)
  {
 dummyHolder.classList.add('nos');
 dummyHolder = document.getElementById(this.value);
 dummyHolder.classList.remove('nos');
	
 }
 
 //////////////////////////////////////////////////////////////
 function checkInOut(e)
 {
 var dmli = "";
   if(dummyHolder.hasChildNodes())
   {
    dmli = dummyHolder.querySelectorAll('input');
    for(var i = 0; i < dmli.length;i++)
	{
		dmli[i].checked = false;
		dmli[i].disabled = true;
	}
   }
   dummyHolder = document.getElementById(this.value);
    dmli = dummyHolder.querySelectorAll('input');
    for(var i = 0; i < dmli.length;i++)
	{
		dmli[i].disabled = false;
	}
 }
  

</script>
</body>
</html>

Hoffe es hilft dir weiter.
MFG

paul schmitz · 22. Juli 2016

Andreax, deine Lösung ist zwar gut, für nicht so erfahrene solltest du dein Script jedoch verünftig formatieren, ich finde, das erhöht die Lesbarkeit. Jeder vernünftige Editor sollte dir die Voraussetzungen dafür schaffen. Siehe Code unten.
Außerdem solltest du dir angewöhnen, bei for-Schleifen über ein Array mit Array.length diesen Wert vorher zu speichern, damit er nicht immer neu berechnet werden muss.
Wozu wird das Argument "e" bei radioCheck() und checkInOut() benötigt?
Ich weiß nicht, wie es sein sollte, aber wenn man bei dir eine Checkbox markiert, dann den Abschnitt wechselt, dann wieder zum Abschnitt, im dem die Markierung war, zurückkehrt, ist diese verschwunden.

Code:

var dummyHolder,ew,rul,allE,allE_length,i;
ew = document.getElementsByName('myRadio');
rul = document.querySelectorAll('form ul');
allE = document.querySelectorAll('form  ul li input');

for(i=0,allE_length=allE.length;i<allE_length;++i){
	allE[i].disabled=true;
}
dummyHolder = document.createElement('ul');
dummyHolder.classList.add('nos');

for(i=0;i<ew.length;i++){
	//rul[i].classList.add('nos');								// <1> am anfang alle boxen ausblenden
	//ew[i].addEventListener('change',radioCheck,true);	// <2> boxen verstecken und wieder einblenden
	ew[i].addEventListener('change',checkInOut,true);		// <3>  boxen enabled und disabled
	//Zum testen der beiden modi: 1 und 2 einblenden  3 ausblenden | oder umgekehrt 
}

function radioCheck(){
	dummyHolder.classList.add('nos');
	dummyHolder=document.getElementById(this.value);
	dummyHolder.classList.remove('nos');
}

function checkInOut(){
	var dmli,dmli_length,i;
	dmli=dummyHolder.querySelectorAll("input");
	if(dummyHolder.hasChildNodes()){
	  for(dmli_length=dmli.length,i=0;i<dmli_length;++i){
		 dmli[i].checked=false,
		 dmli[i].disabled=true;
	  }
	}
	dummyHolder = document.getElementById(this.value);
	dmli = dummyHolder.querySelectorAll("input");
	for(i=0,dmli_length=dmli.length;i<dmli_length;++i){
	  dmli[i].disabled = false;
	}
}

tsseh · 22. Juli 2016

paul schmitz schrieb:
Außerdem solltest du dir angewöhnen, bei for-Schleifen über ein Array mit Array.length diesen Wert vorher zu speichern, damit er nicht immer neu berechnet werden muss.

und hast du mal getestet was das bringt?
eine vorauseilende optimierung bringt nie etwas.

andreax · 22. Juli 2016

@ paul schmitz das zurücknehmen der Häkchen ist absicht weil ich dachte wenn nur eine checkbox grpe verwendet werden soll dann eben nur eine.
das kann man aber mit dem auskommentieren einer Zeile wieder ändern. diese hier dmli.checked=false in der checkInOut Funktion.
mit dem e in den funktionsklammern ist ein zeiger auf den event man kann z.b. e.target für this verwenden. e ist aber nicht bedingung kann man benennen wie man will zb evt
tud mir leid das das script so unübersichtlich geworden ist .
MFG

paul schmitz · 22. Juli 2016

"Ich weiß nicht, wie es sein sollte" bezog sich auf die Haken, ich wollte es nur mal anmerken, damit daraus nicht später ein Problem entsteht. Das war nicht als Kritik gemeint.

@tsseh:

Code:

var start=+new Date();for(var i=0,arr=[];i<100000;i++){arr.push(0).length};+new Date()-start

gibt 1.69 Sekunden für 100000x Aufruf von .length + for-Schleife zurück.
1.68 s/100000 length=0.168ms/length
Angenommen, das Script wird auf 100 Felder erweitert, dauert das length der ersten Schleife 0.168ms*100=0.0168s
In checkInOut() wird dies zweimal gemacht. Macht 0.0168ms*2=0.0336ms. Auf langsamen Systemen vielleicht 0.05ms. Ist noch tolerierbar.
Angenommen, man baut eine Anwendung, in der die eingegebenen Daten in einem Array gespeichert werden, und durch eine Schleife angezeigt werden. In meinem Fall können das 2000 Datensätze werden. Macht 20x so viel. Macht 20*0.0336ms=0.672s. Das ist viel.
Daher dachte ich: Wer weiß, wie viele Felder da noch reinkommen und wie viele Schleifen noch hinzukommen. Programmierste das lieber direkt schnell, dann müssen Personen wie der Fragesteller, die noch nicht so viel Erfahrung haben, sich nicht damit rumärgern.

andreax · 28. Juli 2016

@MAXI-AIR
Hier ein Fiddle zum besseren Verständnis.
mfg

tsseh · 28. Juli 2016

paul schmitz schrieb:
gibt 1.69 Sekunden für 100000x Aufruf von .length + for-Schleife zurück.

wobei in deinem test ca. 99% der zeit für das push draufgehen werden

RadioBoxen und Checkboxen abhängig voneinander machen

Maxi-Air

New member

Dormilich

New member

Maxi-Air

New member

paul schmitz

New member

andreax

Guest

paul schmitz

New member

tsseh

Lounge-Member

andreax

Guest

paul schmitz

New member

andreax

Guest

tsseh

Lounge-Member