nicht angemeldet
wie kann ich optisch eine checkbox verstecken? (oder code auf radiobuttons anpassen)
Linuchs
Matthias Scharwies
Gunnar Bittersmann
TabellenkalkHallo 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
akzeptierte Antworten
wie kann ich optisch eine checkbox verstecken? (oder code auf radiobuttons anpassen)
Rolf B
Bewertung: keine Bewertung
-
Hallo AnLu,
zuerst sieht dieses seltsam aus:
<input type="checkbox" name="box" value="48" onClick="check(47)">48<br>Da klickt jemand die 48, aber das Programm notiert 47.
Code liefern, der bei radiobuttons mit jeweils unterschiedlichem Namen kontrolliert, dass nicht mehr als 6 ausgewählt werden können?
Radiobuttons mit unterschiedlichem Namen haben den Nachteil, dass sie nach Klick nicht zurückgenommen werden können. Bei Checkboxen geht das, hast du aber nicht vorgesehen. Lediglich die 7. geklickte Box wird zurückgenommen.
Dann möchtest du aus den gewählten Zahlen ein Array erstellen, was soll damit passieren? Beim Verlassen der Webseite wäre es ja verloren.
Und jedes HTML-Element kannst du mit der Eigenschaft
style="display:none"verstecken. Dann kann auf die noch sichtbare Zahl geklickt werden, aber der Klick löst ja nur eine Aktion aus, wenn die Checkbox getroffen wird.Packe
<label>...</label>um checkbox und Zahl und gib label den onclick. Allerdings kann der Operator nicht sehen, was er schon geklickt hat. Das ganze Konzept ist nicht schlüssig.Linuchs
-
Hallo Linuchs,
die Variable, die bei onclick(..) übergeben wird, dient nur zum prüfen, ob schon 6 geklickt worden sind:
<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>`Ich bin etwas überfordert mit dem ganzen Thema... Das Array symbolisiert dann einen Tippschein, der an einen Warenkorb übergeben und letztendlich unter dem User gespeichert wird. Hast Du eine andere Idee, wie ich das mit den Checkboxen, oder Buttons vom Tippschein regeln kann?
Beste Grüße AnLu
-
Servus!
ich würde folgendes HTML verwenden:
<form name="sechsaus49"> <legend>6 aus 49</legend> <button>1</button> <button>2</button> <button>3</button> ... </form>die Variable, die bei onclick(..) übergeben wird, dient nur zum prüfen, ob schon 6 geklickt worden sind:
Das Array symbolisiert dann einen Tippschein, der an einen Warenkorb übergeben und letztendlich unter dem User gespeichert wird. Hast Du eine andere Idee, wie ich das mit den Checkboxen, oder Buttons vom Tippschein regeln kann?
Ich würde auf eine Änderung des Formulars mit change lauschen:
https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/change
dann wird mit event.target geschaut, welcher Button geklickt wurde und mit textContent der Textinhalt (= die Zahl) ausgelesen und in einen array geschrieben. Dieser Button wird auf disabled gesetzt.
Wenn Du 6 vollhast, muss der 7.geklickte Button den ersten ersetzen und dieser wird wieder frei.
Irgendwann muss man auf "Senden" drücken können.
Beste Grüße AnLu
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
Ich würde auf eine Änderung des Formulars mit change lauschen:
Buttons werfen ein change Event?
Ich hatte auch schon überlegt, AnLu Buttons zu empfehlen statt des Checkbox-Hack. Aber das hat andere Nachteile.
- Er muss die Buttons zu Toggle-Buttons ausbauen. Dafür braucht es CSS und JS.
- Er muss beim Absenden an den Server die gewählten Buttons ermitteln und in den Post-Body bringen. D.h. er muss sich auch noch in den submit einklinken und dort entweder mit hidden inputs arbeiten oder im submit-Event ein FormData Objekt füllen.
Der Checkbox-Hack ist hier sehr dezent, er schaltet nicht die Sichtbarkeit des halben DOM um. Ich glaube, das ist akzeptabel. Es findet ja nur eine abweichende Visualisierung statt.
Das Array, von dem er sprach, bezieht sich vermutlich auf die Übergabe als Array an PHP. Das geht mit Checkboxen im Form und name="dings[]" automatisch.
Deine Idee zielt auf eine Art "least recently clicked" ab, so dass jeweils das älteste Kreuzchen gelöscht wird, wenn es zu viele werden. Kann man auch machen, ja, dafür muss man ein JavaScript-Array als Queue verwenden (push und shift). Diese Logik wollte ich von ihm erstmal fernhalten, in der Hoffnung, dass es nicht nötig ist.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Ich würde auf eine Änderung des Formulars mit change lauschen:
Buttons werfen ein change Event?
Nein. Da wird man beim Lauschen eher das Gras wachsen hören als eine Änderung des Formulars. 👂
Er muss
Generisches Maskulinum im Singular?
die Buttons zu Toggle-Buttons ausbauen. Dafür braucht es CSS und JS.
Und ARIA.
Der Checkbox-Hack ist hier sehr dezent
Aber sehr sehr. Er ist überhaupt nicht vorhanden.
Für eine Auswahl von mehreren Elementen sind Checkboxen genau das Mittel der Wahl. Daran ist nichts Hack.
Deine Idee zielt auf eine Art "least recently clicked" ab, so dass jeweils das älteste Kreuzchen gelöscht wird, wenn es zu viele werden. Kann man auch machen
Würde ich aber nicht tun. Der Lottospieler will sicher nicht aus Versehen die erste getippte Zahl löschen. Besser bei 6 Kreuzen Schluss machen – wenn Änderungen gewünscht sind, muss erstmal mindestens eins der Kreuze gelöscht werden.
😷 LLAP
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“-
Hallo Gunnar,
Generisches Maskulinum
Hm. Ich hatte aus irgendeinem Grund AnLu männlich verortet. Warum auch immer.
Aber sehr sehr. Er ist überhaupt nicht vorhanden.
Eine Checkbox verstecken und den :checked Status verwenden um die Darstellung des Labels zu beeinflussen ist noch kein Checkbox-Hack? Hiernach wäre es einer - wo ziehst du die Grenze?
wenn Änderungen gewünscht sind, muss erstmal mindestens eins der Kreuze gelöscht werden.
Oder gar nichts. Man hinterlegt das Kästchengitter rot, schreibt noch "Mehr als 6 markiert" drunter für die farblich herausgefordert Sehenden und disabled den Submit-Button
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Eine Checkbox verstecken und den :checked Status verwenden um die Darstellung des Labels zu beeinflussen ist noch kein Checkbox-Hack?
Nein. Das ist Stylen des Eingabefelds. (Mit „Eingabefeld“ meine ich hier das UI-Element bestehend aus
inputund zugehöriger Beschriftung.)Wenn man in Spezialfällen keine visuelle Checkbox braucht, weil ersichtlich ist, dass man da etwas an-/abwählen kann, dann kann man das Eingabefeld so stylen, dass die Checkbox nicht sichtbar ist. Trotzdem bleibt das Eingabefeld funktional eine Checkbox.
In anderen Fällen wird man vielleicht die Checkbox visuell verstecken und stattdessen einen Schiebeschalter anzeigen.
wo ziehst du die Grenze?
Checkbox-Hack ist, wenn man eine Checkbox nicht zur Dateneingabe verwendet, sondern dazu missbraucht, die Sichtbarkeit anderer UI-Elemente zu steuern. Nicht machen.
Man hinterlegt das Kästchengitter rot, schreibt noch "Mehr als 6 markiert" drunter für die farblich herausgefordert Sehenden
Und packt das in eine ARIA live region für die Nicht-Sehenden (u.a.).
und disabled den Submit-Button
Nein, das sollte man nicht machen. Stiftet Verwirrung.
Die ausführlichere Begründung steht entweder in Adam Silvers Form Design Patterns oder in Heydon Pickerings Inclusive Components. Wer findet’s zuerst?
Wer die beiden Bücher nicht im Regal zu stehen hat (Totholz oder E-Book), ist natürlich im Nachteil; sollte diesen Nachteil aber unverzüglich ausgleichen. Wirklich. Gut angelegtes Geld.
😷 LLAP
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
-
-
-
-
Hallo AnLu,
aufgrund beruflicher Nebentätigkeit und dem Vollzeitstudium fehlt mir sehr viel Zeit.....
Studieren und Geld dafür verdienen ist eine eklige Kombination, vor allem, wenn man dann mit komplexen Dingen wie Webdesign konfrontiert wird.
Ich habe ja keine Ahnung, welche Voraussetzungen Du laut Curriculum für diese Aufgabe mitbringen solltest. Es ist allerdings eine unangenehme Sache, sie nicht zu haben und dann irgendwohin zu laufen und eine Abschreibvorlage zu erbitten. Das macht nämlich deine Lage nicht besser. Du schaffst vielleicht den Schein, schmückst Dich dann aber mit Federn, die nicht Deine sind. Und irgendwann kriegt Dich die Wissenslücke dann doch am Allerwertesten.
Der Checkbox-Hack, nach dem Du suchst, ist eine komplexe Sache. Das muss visuell passen, und man muss einige Dinge nachbauen, die einem die Checkbox schenkt
- Darstellen des Eingabefokus (bei Tastatursteuerung)
- Darstellen des Angekreuztseins
- Reaktion auf Klick - eine versteckte Checkbox kann man nicht anklicken.
Letzteres ist ziemlich einfach, und es fehlt Dir sowieso. Ein input-Element braucht immer ein Label. Und wenn man auf das Label für eine Checkbox klickt, reagiert die Checkbox automatisch.
Labels und Inputs werden entweder über eine id gekoppelt, oder dadurch, dass man das input ins label hineinsetzt. Das ist einfacher, macht den Checkbox-Hack aber umständlicher.
<label> <input type="checkbox" name="num1" value="1"> <span>1</span> </label>Davon brauchst Du 49 Stück. Ohne Tabelle. Einfach so, mit einem <br> nach jeweils 7 Stück. Man kann das auch mit einem Grid-Element machen, aber ich will Komplexität raushalten.
Der Name muss eindeutig sein. Bei Radio-Elementen muss der Name gleich sein, bei Checkboxen darf er es nicht. Es sei denn, du verarbeitest den Kram Serverseitig mit PHP. Dann könntest Du bei allen name="box[]" setzen und bekommst dann serverseitig in
$_POST["box"]ein Array mit den angekreuzten Nummern.Mit CSS gibst Du dem Ganzen Style (was CSS ist und wie Du es einbaust, weißt Du? Solltest Du wissen, behaupte ich, wenn Du so eine Seite machen sollst). Ansonsten schau in unser Wiki.
label { display: inline-block; /* Dadurch können die Labels nebeneinander */ margin: 1.1em 0; /* Etwas Luft unten und oben */ border: 1px solid red; /* Lottozahlen gehören in Kästchen */ } label:focus-within { /* Darstellen, dass die Checkbox im Label Fokus hat */ outline: 2px solid red; } label input[type=checkbox] { /* Checkbox visuell verstecken */ width: 0; } label span { display: inline-block; /* Span-Element für width empfänglich machen */ width: 1.2em; text-align: center; }Ich erkläre das jetzt nicht alles. Lies es nach, wenn Du was davon nicht kennst. :focus-within ist relativ neu, das ist eine CSS Pseudoklasse, die aktiv wird wenn das Element oder ein Kind davon den Eingabefokus hat. Alle Browser außer Internet Explorer kennen es mittlerweile.
Der Rahmen ist dann
<head> <style> /* CSS von oben kommt hierhin */ #sechsAus49 { width: max-content; } </style> </head> <body> <h1>6 aus 49</h1> <form name="formular"> <fieldset id="sechsAus49"> <legend>Sechs aus Neunundvierzig</legend> <label>...</label> <label>...</label> <label>...</label> <label>...</label> <label>...</label> <label>...</label> <label>...</label> <br> <label>...</label> usw. </fieldset> <fieldset id="zusatzzahl"> <legend>Zusatzzahl</legend> <label><input type="radio" name="superzahl" value="0"><span>0</span></label> ... <label><input type="radio" name="superzahl" value="9"><span>9</span></label> </fieldset> </form> </body>Kein <br> nach <h1>. Brrr. Wenn Du mehr Abstand willst, setze den margin-bottom des h1 via CSS. Oder ein margin-top für das Form. Wie Du willst. Aber nicht <br>. Hinter den siebten
EiernLabels ist es nötig.Ein Fieldset erzeugt eine Groupbox. Mittels CSS wird ihre Breite auf "max-content" gesetzt, auch das ist relativ neu, aber von den Browsern gut unterstützt. Ein IE macht die Box auf 100% Breite. Egal. Den hat dein Prof nicht.
Vermisst Du das onclick auf den Checkboxen? Das kommt jetzt. Zuerst: verschiebe dein Script aus dem <head> ans Ende des <body>. Der Vorteil ist, dass dann die HTML Elemente schon vorhanden sind, dadurch muss man nicht drauf warten dass sie da sind.
An Stelle eines onclick auf jeder Checkbox registrieren wir einen Klickhandler auf dem Fieldset, in dem die 49 Zahlen stehen:
<script> let zahlenfeld = document.getElementById("sechsAus49"); zahlenfeld.addEventListener("input", lottoNumberChanged); function lottoNumberChanged(event) { } </script>Das nennt man unaufdringliches JavaScript - keine Event-Registrierung im HTML. Das kann das Script alleine. Dieser Rahmen registriert die Funktion
lottoNumberChangedals Behandler für ein input-Ereignis auf dem Element mit Id "sechsAus49". Das Ereignis "input" wird gefeuert, wenn sich der Wert eines input-Elements ändert, und das ist für unser Problem angemessener als ein click. Checkboxen sind zwar so gnädig und simulieren ein click, wenn man sie mit der Tastatur umschaltet, aber richtig ist das nicht.Diese Behandlungsfunktion bekommt vom Browser einen Parameter mit, das event-Objekt. Darauf gibt's ein Property namens "target", und das ist das Element, das sich geändert hat. Irgendwie müssen wir ja wissen, wer sich geändert hat, wenn wir ganz allgemein auf das Fieldset lauschen. Aber solche Ereignisse "blubbern" hoch und man kann sich oben hinstellen und sie alle in Empfang nehmen, ohne jede einzelne Checkbox belauschen zu müssen.
function lottoNumberChanged(event) { let kreuzchen = zahlenfeld.querySelectorAll("input[type=checkbox]:checked"); if (kreuzchen.length > 6) { event.target.checked = false; alert("Mit sieben Zahlen wird Ihr Tippschein ungültig!"); } }Hey, das ist alles. Unser Fieldset enthält außer den Checkboxen nichts, was ein input Event werfen könnte, darum müssen wir nicht großartig prüfen, ob das Event auch von einer Checkbox kommt. Andernfalls müssten wir das mit tagName und ggf. noch type Property von event.target überprüfen.
Um zu bestimmen, wieviele Kreuzchen da sind, zählt man nicht von Hand. Der Browser kann das selbst, mit Hilfe eines CSS Selektors und querySelectorAll. Der Selektor, der da angegeben ist, findet input Elemente mit dem Attribut type="checkbox" und der Pseudoklasse :checked - die immer dann gesetzt ist wenn die Checkbox einen Haken hat.
Sind es mehr als 6, dann wird einfach der checked-Zustand von event.target - also der gerade veränderten Checkbox - wieder auf false gesetzt.
So. Damit ist wohl alles beisammen. Checkbox-Hack, Senden als Array an PHP, und jede Menge Erklärungen zu HTML und JS. Viel Glück!
Rolf
--
sumpsi - posui - obstruxi -
Hallo AnLu,
dein Ansatz ist gar nicht so dumm und ich möchte ihn aufgreifen.
Du kannst die zu tippende Zahl in eine Box (z.B. Tabellenzelle) schreiben und die Checkbox halbtransparent drüberlegen. Dann wird die Checkbox selbst geklickt und muss nicht umständlich versteckt und vergewaltigt werden:
<style> td { text-align: center; position: relative; font-weight: bold; border: 1px solid #ccf; } td input[type=checkbox] { transform: scale(4); position: absolute; left: 50%; top: 50%; opacity: .8; </style> <script> function check ( obj ) { // die Zahl ist obj.value } </script> <table> <tr> <td>48<input type=checkbox name=box onclick="check(this)" value="48"></td> <td>49<input type=checkbox name=box onclick="check(this)" value="49"></td> </tr> </table>Bei mir im Firefox sieht es so verwaschen aus. Vielleicht gibt es einen Tipp, wie man das aufhübschen könnte.
Eigentlich wollte ich den checkboxen left:0; top:0; geben, aber dann wandern sie nach links oben aus der Box. Vermutlich werden sie erst positioniert und dann vergrößert. Die Vergrößerung im CSS zuerst anzugeben, hilft nicht.
Linuchs
-
-
-
Da ich nicht Lotto spiele, kenne ich mich nicht aus.
Ich nehme an, dass die Zusatzziffer später dazukam, um die Chancen gegen den Spieler zugunsten der Lottogesellschaft zu verändern.
So wie ZERO beim Roulette.
Frage 1:
Wie stehen die Chancen, wenn man 6 aus 49 und 7 aus 59 vergleicht?
Frage 2:
Macht es einen Unterschied, die zehn Ziffern in einem Extra-Block anzukreuzen statt im Rahmen von 59 Zahlen?
Linuchs
-
Hallo Linuchs,
die Zusatzzahl macht es nicht zu 7 aus 59, weil die Zusatzziffern nicht gleichberechtigt mit den 49 Kugeln im Topf sind.
6 aus 49 hat 13983816 Möglichkeiten: $$\displaystyle \binom{49}{6} = \frac{49 \cdot 48 \cdot 47 \cdot 46 \cdot 45 \cdot 44}{1 \cdot 2 \cdot 3 \cdot 4 \cdot 5 \cdot 6}$$.
7 aus 59 hat 341149446 Möglichkeiten: $$\displaystyle \binom{59}{7} = \frac{59 \cdot 58 \cdot 57 \cdot 56 \cdot 55 \cdot 54 \cdot 53}{1 \cdot 2 \cdot 3 \cdot 4 \cdot 5 \cdot 6 \cdot 7}$$.
6 aus 49 mit Zusatzzahl hat 139838160 Möglichkeiten: $$\displaystyle \binom{49}{6} \cdot 10$$.
Weil Du zu jeder46 aus 49 Kombi 10 Zusatzziffern haben kannst.Rolf
--
sumpsi - posui - obstruxi-
Hallo,
6 aus 49 mit Zusatzzahl hat 139838160 Möglichkeiten: $$\displaystyle \binom{49}{6} \cdot 10$$.
Weil Du zu jeder 4 aus 49 Kombi 10 Zusatzziffern haben kannst.wo sind die restlichen 2 hin, vorhin war es noch 6 aus 49? Hast du die dir unter den Nagel gerissen oder hast du da schon die Gewinnspielsteuer abgezogen?
Gruß
Kalk-
Hallo Tabellenkalk,
daran hab ich mir den Nagel eingerissen. Aua 😟
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
Liebe(r) AnLu,
Dein HTML empfinde ich als kaputt. Die Bedienbarkeit von Checkboxen ist an sich schon eine haklige Sache (pun intended), daher sind Beschriftungen unverzichtbar. Auch der Tabellensalat ist mit den heute zur Verfügung stehenden Mitteln nicht mehr entschuldbar - nimm eine Liste!
Was die ganzen
onClick-Attribute angeht, so muss da eine andere Lösung her. Das ist fehlerträchtig (siehe 47 und 48) und von daher schlecht.Besser:
<head> <style> #lotto ol { list-style: none; margin: 0; padding: 0; } #lotto li { display: inline-block; } #lotto input { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } #lotto em { border: 1px solid black; border-radius: 0.3em; cursor: pointer; display: block; padding: 1em; text-align: center; width: 2em; } #lotto :checked + em { background: #8f8; } </style> </head> <body> <h1>6 aus 49</h1> <form id="lotto"> <ol> <li><label><input type="checkbox"><em>1</em></label></li> <li><label><input type="checkbox"><em>2</em></label></li> <li><label><input type="checkbox"><em>3</em></label></li> ... </ol> </form> </body>Mit dieser Struktur haben wir die Möglichkeit, die Checkboxen zu verstecken und trotzdem ein visuelles Feedback zu erhalten. Die Bedienbarkeit ist dadurch gegeben, dass ein Klick/Touch auf die Zahl (hier visuell die Zahlenbox) wegen des
label-Elements die unsichtbare Checkbox erreicht. Der Trick mit dem Feedback liegt im Nachbarkombinator und der Pseudoklasse:checked, der die Darstellung der Zahlenbox in Abhängigkeit der selektierten Checkbox ändert.Dein Eventhandler wird auf das
form-Element registriert. Er muss wissen, von welchem Element er ausgelöst wurde (event.target). Dabei solltest Du prüfen, ob der Klick auf einemlabel-Element (oder einem seiner Kinder) lag, um dann von diesem Label-Element dasinput-Kindelement (aka die Checkbox) zu ermitteln. Dann kannst Du insgesamt prüfen, wieviele Checkboxen bereits selektiert wurden:const numChecked = document.querySelectorAll( '#lotto input[type="checkbox"]:checked' ).length;Sollte
checked> 6 sein, wird die aktuelle Checkbox deselektiert, ansonsten wird ihre Selektion zugelassen. Das Deselektieren sollte so immer erlaubt sein.Liebe Grüße
Felix Riesterer
-
@@Felix Riesterer
Die Bedienbarkeit von Checkboxen ist an sich schon eine haklige Sache (pun intended)
😀✔️
daher sind Beschriftungen unverzichtbar.
Das unbedingt.
nimm eine Liste!
Das nicht unbedingt.
Muss ein Screereader denn vorlesen „Item 1 von 49: 1, Checkbox; Item 2 von 49: 2, Checkbox; Item 3 von 49: 3, Checkbox; …“? Oder liegt die Würze hier in der Kürze: „1, Checkbox; 2, Checkbox; 3, Checkbox; …“?
<li><label><input type="checkbox"><em>1</em></label></li> <li><label><input type="checkbox"><em>2</em></label></li> <li><label><input type="checkbox"><em>3</em></label></li> ...Wieso
em? Wird da was besonders hervorgehoben? Manchmal ist einspaneinfach nur einspan.Und wenn das Formular abgeschickt und ausgewertet werden soll, müssen die Eingabefelder
namen haben....? Sind wir da faul? 😉 Ja, sind wir. Deshalb generieren wir die Eingabefelder mit einer Schleife. Kann man serverseitig machen. Oder mit JavaScript, wenn das sowieso nur mit JavaScript richtig funktioniert.Natürlich funktioniert das auch ohne JavaScript richtig: Man kann Zahlen ankreuzen und das Formular abschicken. Die Prüfung, ob genau 6 Zahlen angekreuzt wurden, muss man serverseitig sowieso machen. Die clientseitige Prüfung ist progressive enhancement.
Mit dieser Struktur haben wir die Möglichkeit, die Checkboxen zu verstecken und trotzdem ein visuelles Feedback zu erhalten. Die Bedienbarkeit ist dadurch gegeben
Leider nein. Du hast das visuelle Feedback vergessen, welche Checkbox bei Tastaturbedienung gerade fokussiert ist. Auch dafür der Trick mit dem Nachbarkombinator – und der Pseudoklasse
:focusbzw.:focus-visible.Dein Eventhandler wird auf das
form-Element registriert. Er muss wissen, von welchem Element er ausgelöst wurde (event.target).Muss er nicht, wenn man das etwas anders implementiert: Beim Erreichen von 6 angekreuzten Zahlen setzt man alle Eingabefelder bis auf die angekreuzten auf
disabled. Das kann man sich dann auch zunutze machen für ein visuelles Feedback, dass nichts weiter angekreuzt werden kann. Die schon angekreuzten Felder müssen natürlich weiterhin bedienbar bleiben, damit man sie wieder zurücksetzen kann. Sobald man das bei einem tut, werden wieder alle Eingabefelder freigegeben.Sieht dann so aus. (Ja, ich habe die Schleife zum Erzeugen der Einagbefelder mit JavaScript gemacht. Buh! Und ja, die Meldung mit
alert()auszugeben ist auch buh.)Die 6 und die 49 stehen in Konstanten; so kann man das leicht auf 5 aus 35 ändern.
😷 LLAP
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“-
Hallo Gunnar,
faul? 😉 Ja, sind wir. Deshalb generieren wir die Eingabefelder mit einer Schleife.
Ich hatte den Code schon stehen, aber wieder gestrichen. Es droht Information Overload.
Rolf
--
sumpsi - posui - obstruxi -
Lieber) Gunnar,
nimm eine Liste!
Das nicht unbedingt.
meinst Du eine Aneinanderreihung von
<label>s wäre ausreichend semantisch? Von mir aus sehr gerne, das entschlackt den Code deutlich.Und wenn das Formular abgeschickt und ausgewertet werden soll, müssen die Eingabefelder
namen haben.Wenn man schon mit JavaScript hantiert, könnte man die Datenübergabe komplett anders regeln:
{"lotto":[4,28,36,12,41,33]}...? Sind wir da faul? 😉 Ja, sind wir. Deshalb generieren wir die Eingabefelder mit einer Schleife. Kann man serverseitig machen. Oder mit JavaScript, wenn das sowieso nur mit JavaScript richtig funktioniert.Wie gesagt, wenn man ohnehin mit JavaScript hantiert, dann kann man sich die Auswertung auch einfacher machen.
Natürlich funktioniert das auch ohne JavaScript richtig: Man kann Zahlen ankreuzen und das Formular abschicken. Die Prüfung, ob genau 6 Zahlen angekreuzt wurden, muss man serverseitig sowieso machen. Die clientseitige Prüfung ist progressive enhancement.
Stimmt. Die ist ohnehin unverzichtbar. Ebenso muss man dort prüfen, dass keine Zahlen doppelten eingeschickt werden. Und dass sie im gültigen Zahlenraum sind.
Leider nein. Du hast das visuelle Feedback vergessen, welche Checkbox bei Tastaturbedienung gerade fokussiert ist.
Das ist wahr. Daran habe ich nicht gedacht. Bin halt hauptberuflich doch etwas anderes. Aber zumindest ist der Anfang nicht schlecht.
Beim Erreichen von 6 angekreuzten Zahlen setzt man alle Eingabefelder bis auf die angekreuzten auf
disabled.Das finde ich sehr clever. Prima Idee! Und auch da sollte das visuelle Feedback mit dem Nachbarkombinator gut lösbar sein.
Nicht vorsagen Gunnar, sonst gibt's ne Strafarbeit!
Liebe Grüße
Felix Riesterer
-
@@Felix Riesterer
Wenn man schon mit JavaScript hantiert, könnte man die Datenübergabe komplett anders regeln:
{"lotto":[4,28,36,12,41,33]}So sehr ich JSON liebe, das ist für die serverseitige Auswertung gehupft wie gesprungen.
Wie gesagt, wenn man ohnehin mit JavaScript hantiert, dann kann man sich die Auswertung auch einfacher machen.
Wie gesagt, man muss sich nicht von JavaScript abhängig machen.
Bin halt hauptberuflich doch etwas anderes.
Bist du hauptberuflich etwa …
Nicht vorsagen Gunnar, sonst gibt's ne Strafarbeit!
… Lehrer? 🤣
Ich glaube, meine Lösung kann nicht so einfach kopiert werden, sondern müsste start nachbearbeitet (und dazu erstmal verstanden) werden, damit sie nicht den Anschein erweckt, abgeschrieben zu sein.
😷 LLAP
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
-
-
-
