✔ Button mit Checkbox aktivieren

forsterm · 25. April 2005

Hallo,

habe folgendes Problem, ich habe eine unbestimmte Anzahl von Checkboxen, mit unbekannten Namen und unbekanntem Value. Nu möchte ich es so machen, dass wenn
eine der Checkboxen ausgewählt ist, dass sich dann zwei Buttons, die zu vor disabled waren
nun nicht mehr disabled sind.

Hoffe man versteht mich.

Da ich so gut wie gar kein Javascript kann, wäre es nett, wenn mir jemand helfen könnte.

mfg
forsterm

EDIT:

Hab jetzt das gefunden,

HTML:

<html>
<head>
<script language="JavaScript"> 
<!-- 
function check(checkbox, senden) {
if(checkbox.checked==true){
senden.disabled = false;
} 
else {
senden.disabled = true;
} 
}
//--> 
</script>
</head>
<body>
<form name="agb">
<input type="checkbox" name="agb_check" onClick="check(this, document.agb.senden)" id="fp1"><label for="fp1"> Ich habe die AGBs gelesen, und aktzeptiere diese.
</label><br><br>
<input type="submit" name="senden" value="...Weiter" disabled>
</form>
</body>
</html>

das Script funktioniert aus soweit ganz gut, nur wenn ich jetzt mehrere Checkboxen aktiviert hab und ich eine deaktiviere, dann werden die Buttons auch deaktiviert, obwohl
die anderen Checkboxen noch aktiviert sind.

Wie könnte ich das lösen, dass wenn eine Checkbox bzw. mehrer aktiviert sind die Buttons aktiviert sind und erst wenn keine Checkbox aktiviert ist die Buttons nicht mehr aktiviert sind.

Sealtuagn · 25. April 2005

du müsstest kontrollieren ob

checkbox1 OR checkbox 2 OR checkbox3 OR ..... aktiviert ist !

nicht AND !
sondern OR !

forsterm · 25. April 2005

Sealtuagn hat gesagt.:
du müsstest kontrollieren ob

checkbox1 OR checkbox 2 OR checkbox3 OR ..... aktiviert ist !

nicht AND !
sondern OR !

Schon,

aber das Script macht doch keinen Unterschied welchen Namen bzw welches Value die Checkbox hat. Order wie hast du das gemeint?

Sealtuagn · 25. April 2005

Sagen wir mal du willst ein Registrierungs-Formular machen...
ICh willige die AGB's ein! [Checkbox mit name checkbox1]
Ich möchte mich zu den News-lettern eintragen [checkbox mit name checkbox2]

Wenn du deinen User dazu zwingen willst, das er nicht nur die News-letter beauftragt, sondenr auch die agb's zuwilligt, sähe das Script so aus:

Code:

<script language="JavaScript"> 
<!-- 
function check()
{
    if(checkbox1.checked==true || checkbox2.checked==true || checkbox3.checked==true)
      {
        senden.disabled = false;
      } 
     else 
      {
        senden.disabled = true;
      } 
}
//--> 
/script>

Ich hoffe, du weist, wie ich das meine, oder dass es dir weiterhilft !
Hier hast du ja den vorteil, dasss du weist, wieviele check-boxen es gibt, und wie sie heißen !

Dennis

Quaese · 26. April 2005

Hi,

sind weder Namen noch Anzahl der Checkboxen bekannt, kannst du mit Hilfe von elements.length
die Formularelemente durchlaufen. Während des Durchlaufs prüfst du das jeweils aktuelle Element,
ob es sich um eine Checkbox handelt. Ist es eine Box, musst du noch feststellen, ob es sich um
eine Einzelbox oder um eine Gruppe handelt. Anschliessend kannst du prüfen, ob die Checkbox
angewählt wurde.

Beispiel:

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
  <!--
function testIt(objForm){
  var blnCheck = false;
  var strOut = "";
  // Alle Formularelemente durchlaufen
  for(var i=0; i<objForm.elements.length; i++){
    // Falls es sich beim aktuellen Element um eine Checkbox handelt
    if(objForm.elements[i].type == "checkbox"){
      // Falls die Checkboxengruppe mehr als ein Element enthält
      if(typeof objForm.elements[objForm.elements[i].name].length != "undefined"){
        // Checkboxengruppe durchlaufen
        for(var j=0; j<objForm.elements[objForm.elements[i].name].length; j++){
          // Falls eine Box gewählt wurde
          if(objForm.elements[objForm.elements[i].name][j].checked){
            blnCheck = true;
          }
        }
      // Falls es sich um eine Einzelbox handelt
      }else{
        // Falls die Box gewählt wurde
        if(objForm.elements[objForm.elements[i].name].checked){
          blnCheck = true;
        }
      }
    }
  }

  // Button aktivieren/deaktivieren
  objForm.elements["submitTest"].disabled = !blnCheck;
}
 //-->
</script>
</head>
<body>
<form name="" method="post" action="">
  <div>
    <input type="checkbox" name="checkbox[]" value="a" />a
    <input type="checkbox" name="checkbox[]" value="b" />b
    <input type="checkbox" name="checkbox[]" value="c" />c
    <input type="checkbox" name="checkbox[]" value="d" />d
    <input type="checkbox" name="checkbox[]" value="e" />e
  </div>

  <!-- Checkbox mit anderem Namen -->
  <div><input type="checkbox" name="checkTest" value="f" />f</div>

  <!-- Radiobutton -->
  <div><input type="radio" name="radioTest" value="r1" /> r1</div>

  <!-- Textfeld -->
  <div><input type="text" name="txtTest" value="" /></div>

  <!-- Weitere Checkbox -->
  <div><input type="checkbox" name="checkTest_1" value="g" />g</div>

  <div><input type="button" onclick="testIt(this.form);" value="check" /></div>
  <div><input name="submitTest" type="submit" value="Senden" disabled="disabled"></div>
</form>
</body>
</html>

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

forsterm · 26. April 2005

Hallo,

hab jetzt folgendes Script

HTML:

<html>
<head>
<script type="text/javascript">
<!--
function testIt(objForm){
var blnCheck = false;
var strOut = "";
// Alle Formularelemente durchlaufen
for(var i=0; i<objForm.elements.length; i++){
	// Falls es sich beim aktuellen Element um eine Checkbox handelt
	if(objForm.elements[i].type == "checkbox"){
	 // Falls die Checkboxengruppe mehr als ein Element enthält
	 if(typeof objForm.elements[objForm.elements[i].name].length != "undefined"){
		// Checkboxengruppe durchlaufen
		for(var j=0; j<objForm.elements[objForm.elements[i].name].length; j++){
		 // Falls eine Box gewählt wurde
		 if(objForm.elements[objForm.elements[i].name][j].checked){
			blnCheck = true;
		 }
		}
	 // Falls es sich um eine Einzelbox handelt
	 }else{
		// Falls die Box gewählt wurde
		if(objForm.elements[objForm.elements[i].name].checked){
		 blnCheck = true;
		}
	 }
	}
}
// Button aktivieren/deaktivieren
objForm.elements["submitTest"].disabled = !blnCheck;
}
//-->
</script>
</head>
<body>
<form name="" method="post" action="">
<!-- Checkbox mit anderem Namen -->
<div><input type="checkbox" onclick="testIt(this.form);" name="1" value="1">1</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="2" value="2">2</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="3" value="3">3</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="4" value="4">4</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="5" value="5">5</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="6" value="6">6</div>
 
<div><input name="submitTest" type="submit" value="Senden" disabled="disabled"></div>
</form>
</body>
</html>

komisch ist nur, dass bei der ersten Checkbox wenn sie aktiviert ist, nichts passiert, aber wenn ich es so mach

HTML:

<html>
<head>
<script type="text/javascript">
<!--
function testIt(objForm){
var blnCheck = false;
var strOut = "";
// Alle Formularelemente durchlaufen
for(var i=0; i<objForm.elements.length; i++){
	// Falls es sich beim aktuellen Element um eine Checkbox handelt
	if(objForm.elements[i].type == "checkbox"){
	 // Falls die Checkboxengruppe mehr als ein Element enthält
	 if(typeof objForm.elements[objForm.elements[i].name].length != "undefined"){
		// Checkboxengruppe durchlaufen
		for(var j=0; j<objForm.elements[objForm.elements[i].name].length; j++){
		 // Falls eine Box gewählt wurde
		 if(objForm.elements[objForm.elements[i].name][j].checked){
			blnCheck = true;
		 }
		}
	 // Falls es sich um eine Einzelbox handelt
	 }else{
		// Falls die Box gewählt wurde
		if(objForm.elements[objForm.elements[i].name].checked){
		 blnCheck = true;
		}
	 }
	}
}
// Button aktivieren/deaktivieren
objForm.elements["submitTest"].disabled = !blnCheck;
}
//-->
</script>
</head>
<body>
<form name="" method="post" action="">
<!-- Checkbox mit anderem Namen -->
<input type="hidden" name="" value=""> 
<div><input type="checkbox" onclick="testIt(this.form);" name="1" value="1">1</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="2" value="2">2</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="3" value="3">3</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="4" value="4">4</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="5" value="5">5</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="6" value="6">6</div>
 
<div><input name="submitTest" type="submit" value="Senden" disabled="disabled"></div>
</form>
</body>
</html>

dann geht es beid der ersten Checkbox auch.

Eine Frage hab ich allerdings noch und zwar wie kann ich es anstellen, dass bei dem Script oben nicht nur ein sondern zwei Buttons aktiviert werden?

mfg
forsterm

EDIT:

habs doch geschafft:

HTML:

<html>
<head>
<script type="text/javascript">
<!--
function testIt(objForm){
var blnCheck = false;
var strOut = "";
// Alle Formularelemente durchlaufen
for(var i=0; i<objForm.elements.length; i++){
	// Falls es sich beim aktuellen Element um eine Checkbox handelt
	if(objForm.elements[i].type == "checkbox"){
	 // Falls die Checkboxengruppe mehr als ein Element enthält
	 if(typeof objForm.elements[objForm.elements[i].name].length != "undefined"){
		// Checkboxengruppe durchlaufen
		for(var j=0; j<objForm.elements[objForm.elements[i].name].length; j++){
		 // Falls eine Box gewählt wurde
		 if(objForm.elements[objForm.elements[i].name][j].checked){
			blnCheck = true;
		 }
		}
	 // Falls es sich um eine Einzelbox handelt
	 }else{
		// Falls die Box gewählt wurde
		if(objForm.elements[objForm.elements[i].name].checked){
		 blnCheck = true;
		}
	 }
	}
}
// Button aktivieren/deaktivieren
objForm.elements["Test1"].disabled = !blnCheck;
objForm.elements["Test"].disabled = !blnCheck;
}
//-->
</script>
</head>
<body>
<form name="" method="post" action="">
<!-- Checkbox mit anderem Namen -->
<input type="hidden" name="" value=""> 
<div><input type="checkbox" onclick="testIt(this.form);" name="1" value="1">1</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="2" value="2">2</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="3" value="3">3</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="4" value="4">4</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="5" value="5">5</div>
<div><input type="checkbox" onclick="testIt(this.form);" name="6" value="6">6</div>
 
<div><input name="Test1" type="submit" value="Senden" disabled="disabled"></div>
<div><input name="Test" type="submit" value="ddsf" disabled="disabled"></div> 
</form>
</body>
</html>

Ps: Hab noch ne Frage wie kann ich, wenn eine bestimmte Checkbox aktiviert ist, alle anderen - unbekannten - Checkboxen aktivieren lassen?

✔ Button mit Checkbox aktivieren

forsterm

Erfahrenes Mitglied

Sealtuagn

forsterm

Erfahrenes Mitglied

Sealtuagn

Quaese

Moderator

forsterm

Erfahrenes Mitglied

Neue Beiträge