• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] checkboxen in Abhängigkeit von radio auf required setzen

M

mbarnick

New member
Hallo,
ich habe folgende Anforderung:
auf einer Seite sind 2 radio-Buttons.
Je nachdem, welchen man drückt, sollen bestimmte checkboxen (nur jew. 1-2) auf required gesetzt werden und dafür das required bei den anderen wieder gelöscht werden.
Ich habe das schon auf vielerlei Weise versucht. Das hier ist meine letzte Version bisher. Die alerts sind nur Debugging-Ausgaben, die auch nicht funktionieren.
Das ist jetzt auch nur ein Testscript, aber es müsste doch ungefähr so funktionieren, oder?
Ich bin allerdings kein JavaScript-Profi.
Code: 
...
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
	$(document).ready(function()
	{
		function checkradio()
		{
			alert ("Wert: "+document.f.r.value);

			if (document.f.r.value == "1") 
			{
				 $("#r4").append($(" required='required'"));
				alert ("Wert: "+document.f.r.value+" "+document.f.r4.value);
			}

			if (document.f.r.value == "2") 
			{
				 $("#r3").append($(" required='required'"));
				alert ("Wert: "+document.f.r.value+" "+document.f.r3.value);
			}
			
		}
	});
	</script>
 
</head>
<body>
 
<form name="f" id="f"> 
<input type="radio" value="1" id="r" name="r" onClick="checkradio()" /> Version 1,  
<input type="radio" value="2" id="r" name="r" onClick="checkradio()" /> Version 2<br /><br />

<input type="checkbox" id="r3" name="r3" /> checkbox 1, <input type="checkbox" id="r4" name="r4" /> checkbox 2<br /><br />
</form>

Danke für die Hilfe
 
Zuletzt bearbeitet:
Das ist jetzt auch nur ein Testscript, aber es müsste doch ungefähr so funktionieren, oder?
Zum Vergrößern anklicken....
- IDs müssen eindeutig sein!
- checkradio() ist m.W.n. global nicht verfügbar => Fehlerkonsole
- <input> haben keine Kindelemente
- " required='required'" ist weder ein Selector, noch gültiges HTML

insgesamt ist da so ziemlich alles falsch, was geht.
 
Und document.f.r liefert eine HTMLCollection aller Element mit den Namen "r" und keine Aggregation. Es hat also keine Eigenschaft .value - du musst durch diese Collection durchiterieren und über .checked prüfen, welche Checkbox angehakt ist.

So gesehen sind <select>s viel einfach zu behandeln als Radiobuttons.
 
Danke erstmal.
Stimmt: die Id oben ist falsch ...
Ich konnte das Problem folgendermaßen lösen, versteh aber nicht, warum das Script nur funktioniert wenn das document.ready NICHT vorhanden ist:

HTML: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
 </style>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>
// $(document).ready(function() {
	function checkradio(zahl)
	{
		if (!zahl)
		{
			 $("#r4").prop("required", true);
			 $("#box2").show();
			 $("#r3").prop("required", true);
			 $("#box1").show();
		}
		
		if (zahl == 1) 
		{
			 $("#r4").prop("required", false);
			 $("#box2").hide();
			 $("#r3").prop("required", true);
			 $("#box1").show();
		}
		
		if (zahl == 2)
		{
			 $("#r4").prop("required", true);
			 $("#box2").show();
			 $("#r3").prop("required", false);
			 $("#box1").hide();
		}
		
	}
// });
</script>

</head>
<body>
 
<form name="f" id="f"> 
<input type="radio" value="1" id="r" name="r" onClick="checkradio(1)" /> Version 1,  
<input type="radio" value="2" id="r" name="r" onClick="checkradio(2)" /> Version 2<br /><br />

<div id="box1"><input type="checkbox" id="r3" name="r3" required="required" /> checkbox 1</div>
<div id="box2"><input type="checkbox" id="r4" name="r4" required="required" /> checkbox 2</div><br />
Hier ist noch ein Text!<br /><br />
<input type="submit" value="ab gehts!" />
</form>

</body>
</html>

- - - Aktualisiert - - -

übrigens: die Firefox-Fehlerconsole sagt immer nur, dass auf der Seite kein JavaScript vorhanden ist.
 
Zuletzt bearbeitet von einem Moderator:
versteh aber nicht, warum das Script nur funktioniert wenn das document.ready NICHT vorhanden ist:
Zum Vergrößern anklicken....
Mit einem Wort: Scope. JavaScript hat Function-Scope, und daher ist alles, was innerhalb einer Funktion definiert wird, nicht außerhalb dieser verfügbar.
 
Wenn man checkradio() in $(document).ready() definiert, ist es nicht mehr für onevent-Attribute verfügbar
 
Onload-Handler braucht man prinzipiell nur für auszuführenden Code. Bibliotheken, Funktionen, etc. ist ja der Ladezustand des HTML egal. Erst beim Ausführen derselben wird es wichtig. Und Event-Attribute sollten eh der Vergangenheit angehören ...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben