Miriam: Tickboxen

SELF-Forum

Tickboxen

Miriam
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich hab hier eine einfache Abfrage von Hobbys in dem Fall.
Wie programmiere ich, dass wenn jmd "Handball" anklickt, dass dann automatisch "Sport" mit "angekreuzt" wird?

Danke schonmal!

Hier der Quelltext, falls es jmd interessiert:

<html>
 <head>
  <title>Meine Hobbys</title>
 </head>
 <body>
                 <h1>Meine Hobbys sind...</h1>
                 <form name="frm">
                         <input type="checkbox" name="hobby1" value="Musik"> Musik <br>
                         <input type="checkbox" name="hobby2" value="Computer"> Computer <br>
   <input type="checkbox" name="hobby3" value="Mathe"> Mathematik <br>
                         <input type="checkbox" name="hobby4" value="Lesen"> Lesen <br>
   <input type="checkbox" name="hobby5" value="Sport"> Sport <br>
   <input type="checkbox" name="hobby6" value="Handball"> Handball <br>
                         <br>
     <input type="button" value="Zeige Hobbys..." onClick="auswertung()">
  </form>
                 <script language="JavaScript">
                 <!--
                         function auswertung()
                         {
                          eingabe=""
                          if (document.frm.hobby1.checked)
                          {
                                  eingabe += "Musik \n";
                          }
                          if (document.frm.hobby2.checked)
                          {
                                  eingabe += "Computer \n";
                          }
                          if (document.frm.hobby3.checked)
                          {
                                  eingabe += "Mathematik \n";
                          }
                          if (document.frm.hobby4.checked)
                          {
                                  eingabe += "Lesen \n";
                          }
                          if (document.frm.hobby5.checked)
                          {
                                  eingabe += "Sport \n";
                          }
                          if (document.frm.hobby6.checked)
                          {
                                  eingabe += "Handball ";
                          }
                          alert(eingabe);
                         }
                 //-->
                 </script>
 </body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tickboxen

    Jurik
    – Informationen zu den Bewertungsregeln

    Heyho Miriam,

    <input type="checkbox" name="hobby5" value="Sport"> Sport <br>
       <input type="checkbox" name="hobby6" value="Handball"> Handball <br>

    Probier das mal aus...

    HTML:

      
<input id="sport" type="checkbox" name="hobby5" value="Sport"> Sport <br>  
<input type="checkbox" name="hobby6" value="Handball" onklick="check(this,'sport')"> Handball <br>

    Javascript:

      
function check(element,id){  
 if(element.getAttribute('checked') == 'checked'){  
  document.getElementById(id).setAttribute('checked','checked');  
 } else {  
  document.getElementById(id).setAttribute('checked','');  
 }  
}

    So in etwa müßte es hinhauen. Ich hoffe es zeigt dir auf jeden Fall die Richtung an :)

    MfG,
    Jurik

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tickboxen

      Jurik
      – Informationen zu den Bewertungsregeln

      Etwas eleganter gehts wohl mit:

        
function check(element,id){  
 if(element.checked == true){  
  document.getElementById(id).checked = true;  
 } else {  
  document.getElementById(id).checked = false;  
 }  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Tickboxen

        EKKi
        – Informationen zu den Bewertungsregeln

        Mahlzeit,

        Etwas eleganter gehts wohl mit:

        Und NOCH eleganter wäre es so:

          
function check(element, id) {  
  var other = document.getElementById(id);  
  
  if (typeof(other) == 'object') {  
    other.checked = element.checked;  
  }  
}

        Und der korrekte HTML-Code lautet:

        <input type="checkbox" name="hobby6" value="Handball" onclick="check(this,'sport')">

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Tickboxen

          Christoph
          – Informationen zu den Bewertungsregeln

          Mahlzeit,

          Schon beim Abendessen?

          Etwas eleganter gehts wohl mit:

          Und NOCH eleganter wäre es so:

          Und NOCH VIEL ELEGANTERER und auch bei komplexeren Abhängigkeiten nutzbar ist

            
function check(el) {  
 if(el.checked) for(var i = 1; i < arguments.length; ++i) {  
  var item = el.form[arguments[i]];  
  item.checked = true;  
  if(item.onclick)  
   item.onclick.call(item);  
 }  
}  
function uncheck(el) {  
 if(!el.checked) for(var i = 1; i < arguments.length; ++i) {  
  var item = el.form[arguments[i]];  
  item.checked = false;  
  if(item.onclick)  
   item.onclick.call(item);  
 }  
}

          nutzbar z.B. so:

            
<input type="checkbox" name="sport" onclick="uncheck(this, 'ballsport')"> Sport<br>  
<input type="checkbox" name="ballsport" onclick="uncheck(this, 'fussball', 'handball'); check(this, 'sport')"> Ballsport<br>  
<input type="checkbox" name="fussball" onclick="check(this, 'ballsport')"> Fussball<br>  
<input type="checkbox" name="handball" onclick="check(this, 'ballsport')"> Handball

          Christoph

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Tickboxen

            Christian S.
            – Informationen zu den Bewertungsregeln

            Hi,

            das würde ich dann aber noch parametriesieren, da beide funktionen fast das gleiche tun => code gespart:

            function check(el, check) {
            if(el.checked === check) for(var i = 2; i < arguments.length; ++i) {
              var item = el.form[arguments[i]];
              item.checked = check;
              if(item.onclick)
               item.onclick.call(item);
            }
            }

              
und das item.onclick.call(item) kann man sich auch sparen, da man "this" nicht benötigt. Es würde wohl reichen item.onclick();  
  
Wie auch immer. noch eleganter wäre es, wenn man JS vom Markup trennt und die events dynamisch bindet. Und am besten die Abhängigkeiten in einem Tree abbildet und für das ganze sich einen schönen Manager gebastelt, der das alles erledigt. Naja, vermutlich overkill für diese Aufgabe, aber elegant ;-)  
  
Gruß!
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wenn man zu viel Zeit hat...

              Chrostoph
              – Informationen zu den Bewertungsregeln

              Moin.

              Wie auch immer. noch eleganter wäre es, wenn man JS vom Markup trennt und die events dynamisch bindet. [...] Naja, vermutlich overkill für diese Aufgabe, aber elegant ;-)

              Z.B. so ;)

                
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
     "http://www.w3.org/TR/html4/loose.dtd">  
<title>Test</title>  
<script type="text/javascript">

                
onload = function() {  
 var deps = {  
  sport : ['ballsport'],  
  ballsport : ['fussball', 'handball'],  
  fussball : [],  
  handball : []  
 };  
 var form = document.forms[0];  
 for(var name in deps) {  
  form[name].requires = [];  
  form[name].inferences = deps[name];  
  form[name].onclick = function() {  
   var arr = this.checked ? this.requires : this.inferences;  
   for(var i = 0; i < arr.length; ++i) {  
    var el = form[arr[i]];  
    if(el.checked !== this.checked) {  
     el.checked = this.checked;  
     el.onclick();  
    }  
   }  
  };  
 }  
 for(var name in deps) {  
  for(var i = 0; i < deps[name].length; ++i)  
   form[deps[name][i]].requires.push(name);  
 }  
};
~~~~~~html
  
</script>  
<body>  
<form action="">  
<input type="checkbox" name="sport"> Sport<br>  
<input type="checkbox" name="ballsport"> Ballsport<br>  
<input type="checkbox" name="fussball"> Fussball<br>  
<input type="checkbox" name="handball"> Handball  
</form>

              Christoph

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

        2. Tickboxen

          Miri
          – Informationen zu den Bewertungsregeln

          <html>
           <head>
            <title>Meine Hobbys (Part II)</title>
           </head>
           <body>
                           <h1>Meine Hobbies sind...</h1>
                           <form name="frm">
                                   <input type="checkbox" name="hobby1" value="Musik"> Musik <br>
                                   <input type="checkbox" name="hobby2" value="Computer"> Computer <br>
             <input type="checkbox" name="hobby3" value="Mathe"> Mathematik <br>
                                   <input type="checkbox" name="hobby4" value="Lesen"> Lesen <br>
             <input id="sport" type="checkbox" name="hobby5" value="Sport"> Sport <br>
             <input type="checkbox" name="hobby6" value="Handball" onklick="check(this,'sport')"> Handball <br>
                                   <br>
               <input type="button" value="Zeige Hobbys..." onClick="auswertung()">
            </form>
                           <script language="JavaScript">
                           <!--
                                   function auswertung()
                                   {
                                    eingabe=""
                                    if (document.frm.hobby1.checked)
                                    {
                                            eingabe += "Musik \n";
                                    }
                                    if (document.frm.hobby2.checked)
                                    {
                                            eingabe += "Computer \n";
                                    }
                                    if (document.frm.hobby3.checked)
                                    {
                                            eingabe += "Mathematik \n";
                                    }
                                    if (document.frm.hobby4.checked)
                                    {
                                            eingabe += "Lesen \n";
                                    }
                                    if (document.frm.hobby5.checked)
                                    {
                                            eingabe += "Sport \n";
                                    }
                                    if (document.frm.hobby6.checked)
                                    {
                                            eingabe += "Handball \nSport ";
                                                    dannAuchSport();
                                    }
                                    alert(eingabe);
                                   }
                                   function dannAuchSport()
                                   {
                  alert("Wenn Ihr Hobby Handball ist, dann auch Sport!");
             }
                                   function check(element, id)
                                   {
                var other = document.getElementById(id);
              if (typeof(other) == 'object')
                                           {
                   other.checked = element.checked;
                }
             }
                           //-->
                           </script>
           </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Tickboxen

            EKKi
            – Informationen zu den Bewertungsregeln

            Mahlzeit,

            warum postest Du jetzt nochmal Deinen ursprünglichen Code?

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Tickboxen

            Christoph
            – Informationen zu den Bewertungsregeln

            Moin.

            Falls Du Dein Problem nicht schn selbst gelöst bekommen hast, die mal ein Wink mit dem Zaunpfahl:

            <html>
            <head>
              <title>Meine Hobbys (Part II)</title>
            </head>
            <body>
                             <h1>Meine Hobbies sind...</h1>
                             <form name="frm">
                                     <input type="checkbox" name="hobby1" value="Musik"> Musik <br>
                                     <input type="checkbox" name="hobby2" value="Computer"> Computer <br>
               <input type="checkbox" name="hobby3" value="Mathe"> Mathematik <br>
                                     <input type="checkbox" name="hobby4" value="Lesen"> Lesen <br>
               <input id="sport" type="checkbox" name="hobby5" value="Sport"> Sport <br>
               <input type="checkbox" name="hobby6" value="Handball" onklick="check(this,'sport')"> Handball <br>

            ^^^^^^
            Das Attribut heißt 'onclick'!

            <br>
                 <input type="button" value="Zeige Hobbys..." onClick="auswertung()">
              </form>
                             <script language="JavaScript">
                             <!--
                                     function auswertung()
                                     {
                                      eingabe=""

            Dafür hat man Schleifen erfunden:

            if (document.frm.hobby1.checked)
                                      {
                                              eingabe += "Musik \n";
                                      }

            [...]

            if (document.frm.hobby5.checked)
                                      {
                                              eingabe += "Sport \n";
                                      }
                                      if (document.frm.hobby6.checked)
                                      {
                                              eingabe += "Handball \nSport ";
                                                      dannAuchSport();
                                      }

            Das kann man ersetzen durch

              
for(var i = 1; i <= 6; ++i) {  
    var el = document.frm['hobby'+i];  
    if(el.checked) {  
        if(i == 6) dannAuchSport();  
        eingabe += el.value + '\n';  
    }  
}

            alert(eingabe);
                                     }
                                     function dannAuchSport()
                                     {
                    alert("Wenn Ihr Hobby Handball ist, dann auch Sport!");
               }
                                     function check(element, id)
                                     {
                  var other = document.getElementById(id);
                if (typeof(other) == 'object')
                                             {
                     other.checked = element.checked;

            ^^^^^^^^^^^^^^
            hier brauchst du

              
         if(element.checked) other.checked = true;

            sonst wird auch 'Sport' immer deselektiert, wenn 'Handball' deselektiert wird!

            }
               }
                             //-->
                             </script>
            </body>
            </html>

            Ansonsten gehört language="JavaScript" in die Tonne und durch type="text/javascript" ersetzt. Die Kommentare um das Skript kann man sich übrigens auch sparen...

            Christoph

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Tickboxen

        Miriam
        – Informationen zu den Bewertungsregeln

        geht leider nicht :(
        und das andere scheint mir für unser niveau etwas zu hoch, sry...

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Tickboxen

          EKKi
          – Informationen zu den Bewertungsregeln

          Mahlzeit,

          geht leider nicht :(

          "Geht nicht" ist keine hilfreiche Problembeschreibung - was steht in der Fehlerkonsole?

          und das andere scheint mir für unser niveau etwas zu hoch, sry...

          Naja, wenn Du Javascript programmieren willst, solltest Du Dich schon ein wenig <http://de.selfhtml.org/javascript/intro.htm@title=mit der Materie auseinandersetzen und auch lernbereit sein>.

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln