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>
 

basti1012

Erfahrenes Mitglied
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:

CreativPur

Erfahrenes Mitglied
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
 

Sempervivum

Erfahrenes Mitglied
Du brauchst doch nur den Checkboxen, die Du schon hast, value-Attribute zu verpassen, dann kannst Du sie auf dem Server auswerten.
 

CreativPur

Erfahrenes Mitglied
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
 

Sempervivum

Erfahrenes Mitglied
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.
 

CreativPur

Erfahrenes Mitglied
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
 

CreativPur

Erfahrenes Mitglied
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>
 

Neue Beiträge