conrad: checkbox hidden fkt. nicht

SELF-Forum

checkbox hidden fkt. nicht

conrad
– Informationen zu den Bewertungsregeln

hallo,

ich habe folgendes script:

<script type="text/javascript">
   function show(fieldname)
   {

if(document.formular.boxone.checked)
    {
     document.getElementById(fieldname).style.visibility = "hidden"; //visible
    }
    else
     document.getElementById(fieldname).style.visibility = "visible"; //hidden

if(document.formular.boxtwo.checked)
    {
     document.getElementById(fieldname).style.visibility = "hidden"; //visible
    }
    else
     document.getElementById(fieldname).style.visibility = "visible"; //hidden

if(document.formular.boxthree.checked)
    {
     document.getElementById(fieldname).style.visibility = "hidden"; //visible
    }
    else
     document.getElementById(fieldname).style.visibility = "visible"; //hidden

}

</script>
</head>

<body>
  <form name="formular" action="">
   <table border="1">
    <tr>
     <td>
      <input type="checkbox" name="boxone" onClick="void(show('fieldone'), show('transfer'));">geehrte <b>to find</b>
     </td>
     <td>
      <input type="CHECKBOX" name="fieldone" style="visibility:visible" value="Ihre Eingabe">geehrte <b>blacklist</b>
     </td>
     <td>
      <input type="CHECKBOX" name="transfer" style="visibility:visible" value="Ihre Eingabe">geehrte <b>transfer</b>
     </td>
    </tr>
    <tr>
     <td>
      <input type="checkbox" name="boxtwo" onClick="void(show('fieldone1'), show('transfer1'));">damen <b>to find</b>
     </td>
     <td>
      <input type="CHECKBOX" name="fieldone1" style="visibility:visible" value="Ihre Eingabe">damen <b>blacklist</b>
     </td>
     <td>
      <input type="CHECKBOX" name="transfer1" style="visibility:visible" value="Ihre Eingabe">damen <b>transfer</b>
     </td>
    </tr>
    <tr>
     <td>
      <input type="checkbox" name="boxthree" onClick="void(show('fieldone2'), show('transfer2'));">herren <b>to find</b>
     </td>
     <td>
      <input type="CHECKBOX" name="fieldone2" style="visibility:visible" value="Ihre Eingabe">herren <b>blacklist</b>
     </td>
     <td>
      <input type="CHECKBOX" name="transfer2" style="visibility:visible" value="Ihre Eingabe">herren <b>transfer</b>
     </td>
    </tr>
   </table>

</form>

wenn ich die letzte checkbox (herren to find) anklicke, dann verschwinden auch herren blacklist und herren transfer.

warum aber nicht unabhängig davon damen blacklist und damen transfer?

mfg

conrad

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. checkbox hidden fkt. nicht

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich habe folgendes script:

    <script type="text/javascript">
       function show(fieldname)
       {

    if(document.formular.boxone.checked)
        {
         document.getElementById(fieldname).style.visibility = "hidden"; //visible
        }
        else
         document.getElementById(fieldname).style.visibility = "visible"; //hidden

    if(document.formular.boxtwo.checked)
        {
         document.getElementById(fieldname).style.visibility = "hidden"; //visible
        }
        else
         document.getElementById(fieldname).style.visibility = "visible"; //hidden

    if(document.formular.boxthree.checked)
        {
         document.getElementById(fieldname).style.visibility = "hidden"; //visible
        }
        else
         document.getElementById(fieldname).style.visibility = "visible"; //hidden

    }

    </script>
    </head>

    <body>
      <form name="formular" action="">
       <table border="1">
        <tr>
         <td>
          <input type="checkbox" name="boxone" onClick="void(show('fieldone'), show('transfer'));">geehrte <b>to find</b>
         </td>
         <td>
          <input type="CHECKBOX" name="fieldone" style="visibility:visible" value="Ihre Eingabe">geehrte <b>blacklist</b>
         </td>
         <td>
          <input type="CHECKBOX" name="transfer" style="visibility:visible" value="Ihre Eingabe">geehrte <b>transfer</b>
         </td>
        </tr>
        <tr>
         <td>
          <input type="checkbox" name="boxtwo" onClick="void(show('fieldone1'), show('transfer1'));">damen <b>to find</b>
         </td>
         <td>
          <input type="CHECKBOX" name="fieldone1" style="visibility:visible" value="Ihre Eingabe">damen <b>blacklist</b>
         </td>
         <td>
          <input type="CHECKBOX" name="transfer1" style="visibility:visible" value="Ihre Eingabe">damen <b>transfer</b>
         </td>
        </tr>
        <tr>
         <td>
          <input type="checkbox" name="boxthree" onClick="void(show('fieldone2'), show('transfer2'));">herren <b>to find</b>
         </td>
         <td>
          <input type="CHECKBOX" name="fieldone2" style="visibility:visible" value="Ihre Eingabe">herren <b>blacklist</b>
         </td>
         <td>
          <input type="CHECKBOX" name="transfer2" style="visibility:visible" value="Ihre Eingabe">herren <b>transfer</b>
         </td>
        </tr>
       </table>

    </form>

    wenn ich die letzte checkbox (herren to find) anklicke, dann verschwinden auch herren blacklist und herren transfer.

    Ja, im IE. Für alle Browser gilt: document.getElementById(fieldname) kann kein Element liefern, weil Du keinerlei Elemente mit IDs im HTML hast. Warum also nicht
    document.formular.elements[fieldname].style.visibility = "hidden";
    ?

    warum aber nicht unabhängig davon damen blacklist und damen transfer?

    Gehen wir Deine Logik mal durch:
    Sei document.formular.boxtwo angeklickt, dann wird
    show('fieldone1');
    aufgerufen. Damit ist fieldname='fieldone1'. Sei nun document.formular.boxtwo.checked, dann wird
    document.formular.elements['fieldone1'].style.visibility = "hidden";
    gesetzt... und das Programm läuft weiter zu:

    if(document.formular.boxthree.checked)
        {
         document.formular.elements[fieldname].style.visibility = "hidden"; //visible
        }
        else
        {
        document.formular.elements[fieldname].style.visibility = "visible"; //hidden
        }

    Nun, document.formular.boxthree.checked ist false, dann wird der else-Zweig, also:
    document.formular.elements['fieldone1'].style.visibility = "visible";
    ausgeführt. E voilà.

    Überdenke also Deine Logik.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. checkbox hidden fkt. nicht

      conrad
      – Informationen zu den Bewertungsregeln

      danke schonmal für die antworten.

      leider weiß ich immer noch nicht wie ich es richtig machen muß.

      :-(

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. checkbox hidden fkt. nicht

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        danke schonmal für die antworten.
        leider weiß ich immer noch nicht wie ich es richtig machen muß.
        :-(

        Du musst verhindern, dass im nachfolgenden Programm die Checkbox wieder auf visible gesetzt wird. Das geht wohl am simpelsten, indem Du für jede Zeile (Kombination aus box..., field... und transfer...) eine eigene Funktion aufrufst.

        Mit etwas mehr Eleganz ginge es mit einer Funktion, wenn Du die Checkboxen sinnvoll benennst (box01, field01 und transfer01, dann box02, field02 und transfer02 usw.[1]) und der Funktion dann einfach nur die Nummer übergibst. Die Funktion muss dann aus "box"+nr, "field"+nr und "transfer"+nr die Namen der Elemente zusammensetzen und, wenn "box"+nr checked ist, "field"+nr und "transfer"+nr hidden setzten und sonst eben "field"+nr und "transfer"+nr visible setzen.

        [1] Je nach Gesamtanzahl der Checkboxen auch box001, field001 und transfer001, dann box002, field002 und transfer002 usw.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. checkbox hidden fkt. nicht

          conrad
          – Informationen zu den Bewertungsregeln

          hi,

          habs dank deiner hilfe hinbekommen.
          mein script sieht nun folgendermaßen aus.

          die zeile document.formular.elements[fieldname].checked = ""; kann man natürlich weglassen ;-)

          <head>
            <title>
             Checkbox
            </title>

          <script type="text/javascript">
          function show(fieldorg,fieldname)
          {
              if(document.formular.elements[fieldorg].checked)
              {
               document.formular.elements[fieldname].style.visibility = "hidden"; //visible
               document.formular.elements[fieldname].checked = ""; //visible
              }
              else
              {
               document.formular.elements[fieldname].style.visibility = "visible"; //hidden
              }
          }

          </script>
          </head>

          <body>
            <form name="formular" action="">
             <table border="1">
              <tr>
               <td>
                <input type="checkbox" name="tofind[]" id="tofind001" onClick="void(show('tofind001','blacklist001'), show('tofind001','transfer001'));">geehrte <b>to find</b>
               </td>
               <td>
                <input type="CHECKBOX" name="blacklist[]" id="blacklist001" style="visibility:visible" value="Ihre Eingabe">geehrte <b>blacklist</b>
               </td>
               <td>
                <input type="CHECKBOX" name="transfer[]" id="transfer001" style="visibility:visible" value="Ihre Eingabe">geehrte <b>transfer</b>
               </td>
              </tr>
              <tr>
               <td>
                <input type="checkbox" name="tofind[]" id="tofind002" onClick="void(show('tofind002','blacklist002'), show('tofind002','transfer002'));">damen <b>to find</b>
               </td>
               <td>
                <input type="CHECKBOX" name="blacklist[]" id="blacklist002" style="visibility:visible" value="Ihre Eingabe">damen <b>blacklist</b>
               </td>
               <td>
                <input type="CHECKBOX" name="transfer[]" id="transfer002" style="visibility:visible" value="Ihre Eingabe">damen <b>transfer</b>
               </td>
              </tr>
              <tr>
               <td>
                <input type="checkbox" name="tofind[]" id="tofind003" onClick="void(show('tofind003','blacklist003'), show('tofind003','transfer003'));">herren <b>to find</b>
               </td>
               <td>
                <input type="CHECKBOX" name="blacklist[]" id="blacklist003" style="visibility:visible" value="Ihre Eingabe">herren <b>blacklist</b>
               </td>
               <td>
                <input type="CHECKBOX" name="transfer[]" id="transfer003" style="visibility:visible" value="Ihre Eingabe">herren <b>transfer</b>
               </td>
              </tr>

          </table>

          </form>
          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. checkbox hidden fkt. nicht

            Axel Richter
            – Informationen zu den Bewertungsregeln

            Hallo,

            Warum die Namen "tofind[]", "blacklist[]" und "transfer[]"? Weil PHP dann Arrays aus den GET-Parametern macht? Das macht JavaScript auch. Die zusätzlichen IDs sind deshalb _hierfür_ überflüssig.

              
function show(nr)  
{  
    if(document.formular.elements["tofind[]"][nr].checked)  
    {  
     document.formular.elements["blacklist[]"][nr].style.visibility = "hidden";  
     document.formular.elements["transfer[]"][nr].style.visibility = "hidden";  
     document.formular.elements["blacklist[]"][nr].checked = false;  
     document.formular.elements["transfer[]"][nr].checked = false;  
    }  
    else  
    {  
     document.formular.elements["blacklist[]"][nr].style.visibility = "visible";  
     document.formular.elements["transfer[]"][nr].style.visibility = "visible";  
    }  
}

            im HTML dann:

              
      <input type="checkbox" name="tofind[]" onclick="show(0);">geehrte <b>to find</b>  
...  
      <input type="checkbox" name="blacklist[]" style="visibility:visible" value="Ihre Eingabe">geehrte <b>blacklist</b>  
...  
      <input type="checkbox" name="transfer[]" style="visibility:visible" value="Ihre Eingabe">geehrte <b>transfer</b>  
...  
      <input type="checkbox" name="tofind[]" onclick="show(1);">damen <b>to find</b>  
...  
      <input type="checkbox" name="blacklist[]" style="visibility:visible" value="Ihre Eingabe">damen <b>blacklist</b>  
...  
      <input type="checkbox" name="transfer[]" style="visibility:visible" value="Ihre Eingabe">damen <b>transfer</b>  
...  
      <input type="checkbox" name="tofind[]" onclick="show(2);">herren <b>to find</b>  
...  
      <input type="checkbox" name="blacklist[]" style="visibility:visible" value="Ihre Eingabe">herren <b>blacklist</b>  
...  
      <input type="checkbox" name="transfer[]" style="visibility:visible" value="Ihre Eingabe">herren <b>transfer</b>

            viele Grüße

            Axel

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. checkbox hidden fkt. nicht

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            habs dank deiner hilfe hinbekommen.
            mein script sieht nun folgendermaßen aus.

            Das das funktioniert ist Zufall, da die Browser mit denen du das testet alle sowohl die id als auch den Namen in die elements Collection aufnehmen.

            Das geht auch einfacher und ohne IDs:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  <title>   Checkbox  </title>  
  
<script type="text/javascript">

            function show(feld)  
{  
    var form = feld.form;  
    var array = form[feld.name];  
    for(var i = 0;i < array.length; i++)  
    {  
         if( array[i] == feld)  
         {  
              form['blacklist[]'][i].style.visibility  = feld.checked ? 'hidden' : 'visible';  
              form['transfer[]'][i].style.visibility  = feld.checked ? 'hidden' : 'visible';  
              return  
         }  
    }  
}  

~~~~~~html
</script>  
</head>  
  
<body>  
  <form name="formular" action="">  
   <table border="1">  
    <tr>  
     <td>  
      <input type="checkbox" name="tofind[]" onclick="show(this );">geehrte <b>to find</b>  
     </td>  
     <td>  
      <input type="CHECKBOX" name="blacklist[]" value="Ihre Eingabe">geehrte <b>blacklist</b>  
     </td>  
     <td>  
      <input type="CHECKBOX" name="transfer[]" value="Ihre Eingabe">geehrte <b>transfer</b>  
     </td>  
    </tr>  
    <tr>  
     <td>  
      <input type="checkbox" name="tofind[]" onclick="show(this );">damen <b>to find</b>  
     </td>  
     <td>  
      <input type="CHECKBOX" name="blacklist[]" value="Ihre Eingabe">damen <b>blacklist</b>  
     </td>  
     <td>  
      <input type="CHECKBOX" name="transfer[]" value="Ihre Eingabe">damen <b>transfer</b>  
     </td>  
    </tr>  
    <tr>  
     <td>  
      <input type="checkbox" name="tofind[]" onclick="show(this );">herren <b>to find</b>  
     </td>  
     <td>  
      <input type="CHECKBOX" name="blacklist[]" value="Ihre Eingabe">herren <b>blacklist</b>  
     </td>  
     <td>  
      <input type="CHECKBOX" name="transfer[]" value="Ihre Eingabe">herren <b>transfer</b>  
     </td>  
    </tr>  
  
   </table>  
  
  
  </form>  
</body>  
</html>

            Struppi.

            --
            Javascript ist toll (Perl auch!)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. checkbox hidden fkt. nicht

              Axel Richter
              – Informationen zu den Bewertungsregeln

              Hallo,

              Das das funktioniert ist Zufall, da die Browser mit denen du das testet alle sowohl die id als auch den Namen in die elements Collection aufnehmen.

              Deine Beschreibung ist zwar richtig, aber Zufall ist das nicht. ;-)

              viele Grüße

              Axel

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

  2. checkbox hidden fkt. nicht

    Reiner Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    versuch mal, ein DIV um die checkbox zu bauen, und dann das DIV entsprechend visible/hidden zu schalten.

    Gruß
    Reiner

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln