✔ Auswahl von Checkboxen per Link

[kapfe89]

Hallo Zusammen,

ich habe viel in Foren über die Auswahl von Checkboxen per JS gelesen, doch mein Problem wurde dadurch bisher nicht gelößt.

                    <div onclick='activate_cb()' >
                                <input type='checkbox' name='category[]' value='[% $category %]'>
                                [% $category %]
                        </div>

Es werden verschiedene Divs mit Checkboxen erstellt, der Wert der Checkbox wird über Smarty bzw. PHP generiert und ist somit vorher nicht feststellbar.

Durch Click auf den Div möchte ich die Checkbox aktivieren und deaktivieren können, und zwar mit activate_cb().

Dazu muss ich den aktuellen Zustand auslesen können, was ich aber nicht hinbekommen, da der Value ja dynamisch erzeugt wird, und ich den somit nicht kenne.

Ich hoffe ihr könnt mir helfen.

Vielen Dank schon mal im voraus.

Grüße Martin

 

[Quaese]

Hi,

du könntest der Funktion mit this die Referenz aufs auslösende Element übergeben.

<div onclick='activate_cb(this);'>

Vorausgesetzt, es handelt sich um die erste Checkbox innerhalb des DIV-Elements, kannst du mit Hilfe der Methode getElementsByTagName über ihren Index (0) zugreifen. Entsprechend des aktuellen Zustands (checked=true/false) kannst du die Checkbox setzen.

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

Ciao
Quaese

 

[webmanie]

Hi, hoffe ich habe dein Problem verstanden!

Also du möchtest...

Durch Click auf den Div möchte ich die Checkbox aktivieren und deaktivieren können, und zwar mit activate_cb().

Mein Vorschlag:
Beim generieren erstellst du noch ein zusatzl. id Attribut mit fortlaufender Nummer.

<input type='checkbox' name='category[]' value='[% $category %]' id='cb' + $i>

Und diese id kannst du auch deinem Div Element mitgeben:

<div onclick='activate_cb(id)' >

Anschließend kannst du bequem über die Javascript Funktion getElementById() den Wert auslesen.

 

[kapfe89]

Hallo,

vielen Dank an euch Beide.

Beide Vorschläge gehen, ich bin begeistert

Werde aber wohl den ersten benutzen, da ich so keine zustätzliche Variable definieren muss.

Folgendes funktioniert zwar, ich verstehe allerdings die Syntax nicht:

objThis.getElementsByTagName("input")[0].checked = (objThis.getElementsByTagName("input")[0].checked)? false : true;

Ist die rechte Seite die Kurzschreibweise eines if-else-Konstrukts? Aber was stellt die linke Seite dar?

Danke.
Gruß Martin

 

[Quaese]

Hi,

die rechte Seite ist in der Tat eine Kurzschreibweise für ein if-else-Konstrukt. Ist die Checkbox (CB) gesetzt, liefert der Ausdruck false (CB wird abgewählt), ist sie nicht gesetzt, true (CB wird angewählt).

Das Ergebnis des Ausdrucks auf der rechten seite wird der checked-Eigenschaft der Checkbox (linke Seite) zugewiesen.

Linke Seite im Detail:

objThis.getElementsByTagName("input")[0]

Repräsentiert das erste input-Element innerhalb des Knotens objThis (in deinem Fall das DIV).

objThis.getElementsByTagName("input")[0].checked

Ist die checked-Eigenschaft des oben beschriebenen input-Elements.

Ciao
Quaese

 

[kapfe89]

Hallo,

Danke für die Aufklärung.
Wenn ich jetzt zustätzlich noch beim deaktivieren einer Checkbox überprüfen möchte, ob jetzt alle Checkboxen deaktiviert sind, muss ich ja auch auf die Checkboxen in den anderen Divs zugreifen können.

Dies geht dann ja nicht mit den this oder?
Dann müsste ich ein id vergeben und mit einer Schleife alle druchlaufen und überprüfen, ob einer checked = true ist.

Oder gibt es dafür auch eine elegantere Lösung?

Gruße && Danke,

Martin

 

[Quaese]

Hi,

da die Checkboxen alle den gleichen Name haben, kannst du mit Hilfe von getElementsByName eine Kollektion mit allen CB-Elementen erstellen. Diese kannst du in einer Schleife durchlaufen und gemäss deinen gewünschten Anforderungen überprüfen.

Ciao
Quaese

 

[kapfe89]

Habs folgendermaße probiert:

 for (var i = 0; i < 2; i++) {
                        if (document.getElementsByName("category")[i].checked == true){
                                document.getElementById('next').style.display = 'inline';
                        }
                }

Habs jetzt so probiert, leider passiert dabei gar nichts, da die if-Bedingung nie erfüllt wird. Wieso ist das so?

Ziel ist halt, dass, wenn irgendeine Checkbox angeklickt ist, dann soll ein Link mit der Id "next" angezeigt werden.


Danke && Gruß Martin

 

[kapfe89]

Habs bereits gelößt.

Musste "category[]" schreiben, dann gings.

Allerdings weiß ich nicht, wie viele Kategorien es gibt. Kann ich per javascript rausfinden, wie oft die Schleife durchlaufen werden muss, also wie viele Checkboxen es gibt?

Außerdem kann ich die checkbox jetzt nur noch durch Klick auf das Div aktivieren, jedoch nicht mehr über die Checkbox selbst.

Danke && gruß

Martin

 

[Quaese]

Hi,

die Anzahl aller Checkboxen kannst du ermitteln, indem du zunächst alle input-Elemente mit der Methode getElementsByTagName in eine Kollektion schreibst. Diese durchläufst du und testest jedes Element mit Hilfe der Eigenschaft type, ob es sich um eine CB handelt (elem.type=='checkbox').

Um zu realisieren, dass der Event korrekt ausgeführt wird, musst du einen onclick-Handler für die Checkboxen definieren, der das Verbreiten des Events unterbindet. Denn sonst wird er auf seinem "Weg" zum document-Objekt zweimal verarbeitet (input und div).

Bsp:

<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;

  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
}

function myTester(objEvt){
  if(window.event){
    window.event.cancelBubble = true;
  }else{
    objEvt.stopPropagation();
  }
}
 //-->
</script>
</head>
<body>
<div onclick='activate_cb(this); return false;'>
  <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>

Ciao
Quaese