✔ Auswahl von Checkboxen per Link

Perfekt, wusste nicht, dass ich das ganze in ein Array einlesen kann.

Danke dass du dir soviel Zeit für mich nimmst.

Eine Frage hätte ich noch, und zwar warum ich die Checkboxen selbst jetzt nicht mehr aktivieren kann, sondern nur noch über die Divs.
Möchte eigtl. über die Checkboxen genau den selben Effekt wie über die Divs ausführen.

Gruß & Danke
Martin
 
Hi,

der zweite Teil meiner letzten Antwort behandelt das Problem mit den Checkboxen und ihrer Funktionalität.

Ciao
Quaese
 
Oh sorry hab ich nicht gesehen.

Der google-analytics Code gehört aber nicht mehr dazu oder?

Also ich habs jetzt ausprobiert, cancelbubble leitet mich auf das Div weiter und führt dann die Div-Methode activate_cb() aus, oder?

Es klappt jetzt zwar, dass Checkboxen aktvierbar und deaktivierbar sind, aber leider klappt die Anzeige von Links, wenn eine Checkbox aktiviert wurde, bzw. das Verstecken leider nicht.

Es klappt nur das Aktivieren bzw. Deaktivieren, jedoch nicht die Div Funktionen.

Woran kann das liegen?

Danke & Gruß
Martin
 
Hi,

nein, cancelBubble bzw. stopPropagation unterbinden das Weiterleiten des Events Richtung document-Objekt - das sogenannte Bubbling.

Was du machen kannst, ist die Anweisungen, die bei beiden Eventbehandlungen abgearbeitet werden sollen, in eine eigene Funktion zu packen. Diese rufst du in den jeweiligen Eventhandlern auf.

Beispiel:
Code: 
function activate_cb(objThis){
  objThis.getElementsByTagName("input")[0].checked = (objThis.getElementsByTagName("input")[0].checked)? false : true;

  var blnCheck = true;
  var arrCB = document.getElementsByName("category[]");
  for(var i=0; i<arrCB.length; i++){
    if(arrCB[i].checked == true){
      blnCheck = false;
      break;
    }
  }
  // blnCheck = false => es wurde mindestens eine CB angewählt, true => es wurde keine CB angewählt

  fnHandler(objThis);
}

function myTester(objEvt){
  if(window.event){
    window.event.cancelBubble = true;
  }else{
    objEvt.stopPropagation();
  }
  fnHandler((window.event)?window.event.srcElement.parentNode:objEvt.target.parentNode);
}


function fnHandler(objDiv){
  // ToDo: Was für beide Funktionen erledigt werden soll

  // Beispiel: Ausgabe des Tagnamen (sollte DIV sein)
  alert(objDiv.tagName);
}

Ciao
Quaese
 
Hallo,

Code: 
function fnHandler(objDiv){
        if ( objDiv.getElementsByTagName("input")[0].checked == true ) {
        alert("Klappt");
        }

Habs so probiert, aber dann kann ich auf die Checkboxen wieder nicht klicken.

Verstehs nicht, dass es so schwierig ist, den Checkboxen und Divs die gleiche Funktion zu geben. :(

Gruß & Danke
Martin
 
Hi,

bei mir funktioniert es mit folgendem Codefragment:
Code: 
<html>
<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 activate_cb(objThis){
  objThis.getElementsByTagName("input")[0].checked = (objThis.getElementsByTagName("input")[0].checked)? false : true;

  fnHandler(objThis, objThis.getElementsByTagName("input")[0].checked);
}

function myTester(objEvt){
  if(window.event){
    window.event.cancelBubble = true;
  }else{
    objEvt.stopPropagation();
  }
  var blnChecked = (window.event)? window.event.srcElement.checked : objEvt.target.checked
  fnHandler((window.event)?window.event.srcElement.parentNode:objEvt.target.parentNode, blnChecked);
}

function fnHandler(objDiv, blnChecked){
  // ToDo: Was für beide Funktionen erledigt werden soll

  // Beispiel: Wurden alle CBs deaktiviert?
  var blnCheck = true;
  var arrCB = document.getElementsByName("category[]");
  for(var i=0; i<arrCB.length; i++){
  	if(arrCB[i].checked == true){
    	blnCheck = false;
      break;
    }
  }

  // Beispiel: Ausgabe des Tagnamen (sollte DIV sein) und die Nachricht, ob alle CBs deaktiviert wurden
  alert("Übergeordnetes Element: " + objDiv.tagName + "\nDie aktuelle Checkbox wurde gesetzt: "+blnChecked+"\nEs wurden " + ((blnCheck)?"":"nicht ") + "alle Checkboxen deaktiviert");
}
 //-->
</script>
</head>
<body>
<div onclick='activate_cb(this);'>
  <input type='checkbox' name='category[]' onclick="myTester(event);" value='cat'>
  [% $category %]
</div>
<div onclick='activate_cb(this);'>
  <input type='checkbox' name='category[]' onclick="myTester(event);" value='cat'>
  [% $category %]
</div>
<div onclick='activate_cb(this);'>
  <input type='checkbox' name='category[]' onclick="myTester(event);" value='cat'>
  [% $category %]
</div>
</body>
</html>

Die gemeinsame Handler-Funktion (fnHandler) erwartet zwei Argumente:
  • objDiv - das übergeordnete Element (hier: DIV)
  • blnChecked - boolescher Wert (true/false), der anzeigt, ob die aktuelle CB an- oder abgewählt wurde

Ciao
Quaese
 
Hi,

erstmal vielen Dank für deine Hilfe. War wirklich sehr nett von dir und hat mir sehr viel weitergeholfen.

Ich habs jetzt doch über eine Id gemacht, den ich per Smarty jeder Checkbox mitgebe, und über diese Id spreche ich die Checkboxen dann mit deiner Methode an und so hat es letztendlich auch geklappt und ich bin zufrieden :)

Nocheinmal vielen Dank!

Gruß & Danke
Martin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück