wie kann ich optisch eine checkbox verstecken? (oder code auf radiobuttons anpassen) von AnLu, 24.11.2020 19:57

wie kann ich optisch eine checkbox verstecken? (oder code auf radiobuttons anpassen)

AnLu 24.11.2020 19:57 (Versionen)

Hallo in die Runde,

ich benötige dringend Hilfe: Für ein Uni-Projekt soll ein Lotterie-Website erstellt werden. Für einen Lottoschein habe ich bereits folgenden Code geschrieben:

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/resources/css/lotterie.css}" />
    <title>Lotterie</title>

    <script language="JavaScript">
      var max=6;                                                         // maximale Anzahl gewählter Checkboxen
      function check(boxnr)
      {
        var objekte_gewaehlt=0;                                          // Anzahl gewählter Checkboxen zurücksetzen
        for(var i=0; i<document.formular.box.length; i++)                // alle Checkboxen durchgehen
          if(document.formular.box[i].checked==true) objekte_gewaehlt++; // gewählte Checkboxen zählen
        if(objekte_gewaehlt > max)                                       // wenn Anzahl gewählter Checkboxen zu hoch...
        {
          document.formular.box[boxnr].checked=false;                    // gerade gewählte Checkboxen zurücksetzen
          alert("Sie können nur "+max+" Zahlen auswählen!"); // Hinweis ausgeben
        }
      }
    </script>
</head>
    <body>
    <h1>6 aus 49</h1>
    <br>
    <form name="formular">
        <table id="sechsaus49">
            <caption>6 aus 49</caption>
            <tbody>
            <tr>
                <td><input type="checkbox" name="box" value="1" onClick="check(0)">1<br></td>
                <td><input type="checkbox" name="box" value="2" onClick="check(1)">2<br></td>
                <td><input type="checkbox" name="box" value="3" onClick="check(2)">3<br></td>
                <td><input type="checkbox" name="box" value="4" onClick="check(3)">4<br></td>
                <td><input type="checkbox" name="box" value="5" onClick="check(4)">5<br></td>
                <td><input type="checkbox" name="box" value="6" onClick="check(5)">6<br></td>
                <td><input type="checkbox" name="box" value="7" onClick="check(6)">7<br></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box" value="8" onClick="check(7)">8<br></td>
                <td><input type="checkbox" name="box" value="9" onClick="check(8)">9<br></td>
                <td><input type="checkbox" name="box" value="10" onClick="check(9)">10<br></td>
                <td><input type="checkbox" name="box" value="11" onClick="check(10)">11<br></td>
                <td><input type="checkbox" name="box" value="12" onClick="check(11)">12<br></td>
                <td><input type="checkbox" name="box" value="13" onClick="check(12)">13<br></td>
                <td><input type="checkbox" name="box" value="14" onClick="check(13)">14<br></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box" value="15" onClick="check(14)">15<br></td>
                <td><input type="checkbox" name="box" value="16" onClick="check(15)">16<br></td>
                <td><input type="checkbox" name="box" value="17" onClick="check(16)">17<br></td>
                <td><input type="checkbox" name="box" value="18" onClick="check(17)">16<br></td>
                <td><input type="checkbox" name="box" value="19" onClick="check(18)">19<br></td>
                <td><input type="checkbox" name="box" value="20" onClick="check(19)">20<br></td>
                <td><input type="checkbox" name="box" value="21" onClick="check(20)">21<br></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box" value="22" onClick="check(21)">22<br></td>
                <td><input type="checkbox" name="box" value="23" onClick="check(22)">23<br></td>
                <td><input type="checkbox" name="box" value="24" onClick="check(23)">24<br></td>
                <td><input type="checkbox" name="box" value="25" onClick="check(24)">25<br></td>
                <td><input type="checkbox" name="box" value="26" onClick="check(25)">26<br></td>
                <td><input type="checkbox" name="box" value="27" onClick="check(26)">27<br></td>
                <td><input type="checkbox" name="box" value="28" onClick="check(27)">28<br></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box" value="29" onClick="check(28)">29<br></td>
                <td><input type="checkbox" name="box" value="30" onClick="check(29)">30<br></td>
                <td><input type="checkbox" name="box" value="31" onClick="check(30)">31<br></td>
                <td><input type="checkbox" name="box" value="32" onClick="check(31)">32<br></td>
                <td><input type="checkbox" name="box" value="33" onClick="check(32)">33<br></td>
                <td><input type="checkbox" name="box" value="34" onClick="check(33)">34<br></td>
                <td><input type="checkbox" name="box" value="35" onClick="check(34)">35<br></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box" value="36" onClick="check(35)">36<br></td>
                <td><input type="checkbox" name="box" value="37" onClick="check(36)">37<br></td>
                <td><input type="checkbox" name="box" value="38" onClick="check(37)">38<br></td>
                <td><input type="checkbox" name="box" value="39" onClick="check(38)">39<br></td>
                <td><input type="checkbox" name="box" value="40" onClick="check(39)">40<br></td>
                <td><input type="checkbox" name="box" value="41" onClick="check(40)">41<br></td>
                <td><input type="checkbox" name="box" value="42" onClick="check(41)">42<br></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box" value="43" onClick="check(42)">43<br></td>
                <td><input type="checkbox" name="box" value="44" onClick="check(43)">44<br></td>
                <td><input type="checkbox" name="box" value="45" onClick="check(44)">45<br></td>
                <td><input type="checkbox" name="box" value="46" onClick="check(45)">46<br></td>
                <td><input type="checkbox" name="box" value="47" onClick="check(46)">47<br></td>
                <td><input type="checkbox" name="box" value="48" onClick="check(47)">48<br></td>
                <td><input type="checkbox" name="box" value="49" onClick="check(48)">49<br></td>
            </tr>
            </tbody>
            <table id="Zusatzzahl">
                <caption>Superzahl</caption>
                <tbody>
                <tr>
                    <td><input type="radio" name="superzahl" value="0">0</td>
                    <td><input type="radio" name="superzahl" value="1">1</td>
                    <td><input type="radio" name="superzahl" value="2">2</td>
                    <td><input type="radio" name="superzahl" value="3">3</td>
                    <td><input type="radio" name="superzahl" value="4">4</td>
                    <td><input type="radio" name="superzahl" value="5">5</td>
                    <td><input type="radio" name="superzahl" value="6">6</td>
                    <td><input type="radio" name="superzahl" value="7">7</td>
                    <td><input type="radio" name="superzahl" value="8">8</td>
                    <td><input type="radio" name="superzahl" value="9">9</td>
                </tr>
                </tbody>
            </table>
        </table>
    </form>
    </body>

Leider sieht das ganze mit den Checkboxen sehr bescheiden aus. Ich kann meine Funktion nicht auf Radiobuttons übertragen, da bei gleichem Namen immer nur ein Radiobutton gewählt werden kann....

Kann mir wer sagen wie ich die checkboxen otpisch verstecken kann, oder einen Code liefern, der bei radiobuttons mit jeweils unterschiedlichem Namen kontrolliert, dass nicht mehr als 6 ausgewählt werden können?

Falls wer ganz fleißig sein möchte: Diese 6 Zahlen + Superzahl, sollen in einem Array gespeichert werden. Ich bin absoluter Neuling in java /Javascript und aufgrund beruflicher Nebentätigkeit und dem Vollzeitstudium fehlt mir sehr viel Zeit.....

Beste Grüße AnLu

Beitrag melden

– Informationen zu den Bewertungsregeln

akzeptierte Antworten