Checkbox unsichtbar machen

CreativPur

Erfahrenes Mitglied
Hi,
ich habe eine Tabelle, wo Lottozahlen von 1-49 eingepflegt sind.
Für jede Zahl ein Tabellenfeld.
Jetzt möchte ich nicht nur wie folgend das angeklickte Feld farblich ändern, sondern jedem Feld auch eine unsichtbare Checkbox integrieren.
Wie kann ich das lösen ? Per CSS ?

Javascript:
function toggle(checkbox) {
    var par = checkbox;
    while (par && par.nodeName !== "TD") {
        par = par.parentNode;
    }
    if (par){
        par.style.backgroundColor = checkbox.checked? "blue": "#fff";
        par.style.font = checkbox.checked? "blue": "#fff";
    }
}

HTML:
<table  border="1" style="font-size:14px;">
              <tbody>      
                <tr align="center">
                  <td><input type="checkbox" id="checkzeile1" onclick="toggle(this)"/>1</td>
                  <td><input type="checkbox" id="checkzeile2" onclick="toggle(this)"/>2</td>
                  <td><input type="checkbox" id="checkzeile3" onclick="toggle(this)"/>3</td>
                  <td><input type="checkbox" id="checkzeile4" onclick="toggle(this)"/>4</td>
                  <td><input type="checkbox" id="checkzeile5" onclick="toggle(this)"/>5</td>
                  <td><input type="checkbox" id="checkzeile6" onclick="toggle(this)"/>6</td>
                  <td><input type="checkbox" id="checkzeile7" onclick="toggle(this)"/>7</td>
                  <td><input type="checkbox" id="checkzeile8" onclick="toggle(this)"/>8</td>
                  <td><input type="checkbox" id="checkzeile9" onclick="toggle(this)"/>9</td>
                  <td><input type="checkbox" id="checkzeile0" onclick="toggle(this)"/>0</td>
            <tr>
              </tbody>
            </table>
 
Meinst du sowas wie den checkbox hack ?
Brauchst die Checkbox nur um die Spalten Farblich zu machen ?
Dann würde ich darauf verzichten und das mit classen regeln .
Zb so
Code:
<style>
tr td{
  padding:10px;
}
.blau{
  background:blue;
}
</style>

<table  border="1" style="font-size:14px;">
              <tbody>     
                <tr align="center">
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
                  <td>0</td>
            <tr>
              </tbody>
            </table>

<script>
ele=document.querySelectorAll('td');
ele.forEach(function(el){
    el.addEventListener('click',function(){
        el.classList.toggle("blau");
    })
})
 
</script>
Oder meinst du das anders ?
 
Zuletzt bearbeitet:
Hi Basta,
vielen Dank für Deine Mühe.
nein, ich benötige die angeklickten Zahlen natürlich für eine Speicherung in die Datenbank.

Einmal soll der user sehen, was er angeklickt hat, und zum zweiten soll diese Auswahl dann auch gespeichert werden. Daher benötige ich ja die versteckten Checkboxen
 
Du brauchst doch nur den Checkboxen, die Du schon hast, value-Attribute zu verpassen, dann kannst Du sie auf dem Server auswerten.
 
Ja, das ist richtig, nur ich möchte, dass man die Checkboxen eben nicht in den Feldern sieht.
Sieht eben nicht so rekelnd aus

Bildschirmfoto 2020-12-05 um 09.15.03.png
 
Dann den Checkboxen ein Label zuordnen, das kannst Du dann nach Belieben gestalten und die Checkboxen unsichtbar machen, entweder mit CSS oder dem hidden-Attribut.
 
Das habe ich schon versucht.
Als weißes JPG 5px x 5px bg_hintergrund in jedes Feld usw..
Aber ich habe es nicht hin bekommen
 
Jetzt habe ich es hin bekommen..

CSS:
 input[type="checkbox"]{display:none}
            input[type=checkbox] + label   {       
                    background: url(http://lotto.creativpur.com/img/tb_hintergrund.jpg);       height: 32px;       width: 32px;       display:inline-block;      padding: 0 0 0 0px;   }
            input[type=checkbox]:checked + label    {       
                background: url(http://lotto.creativpur.com/img/tb_hintergrund2.jpg);        height: 32px;        width: 32px;        display:inline-block;        padding: 0 0 0 0px;    }

Code:
 <td><input type='checkbox' name='thing' value='valuable' id="1"/><label for="1">1</label></td>
 
Zurück