Checkboxen verändern

[saschaw]

Hallo,
ich habe auf einer Seite Checkboxen, wobei es hier aber zwei unterschiedliche Funktionen gibt.
1. 4 Checkboxen welche alle oder keine oder nur eine oder zwei, drei ausgewählt werden können.
2. Checkboxen unterschiedlicher Anzahl, wobei hier aber nicht mehr als 3 Boxen ausgewählt werden dürfen (mit JavaScript)
Das funktioniert auch.
Wenn ich jetzt aber hingehe und versuche die Boxen mit CSS farblich und auch die Form zu verändern, sind die Boxen welche ich mit JavaScript überwache nicht mehr da...
Die Checkboxen aus Punkt 1 haben dann aber die gewünschten Farben und Formen.

Mein CSS:

<style>
input[type="checkbox"] {
  display:none;
}
input[type="checkbox"] + label::before {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 2px solid #0767fd;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
}
input[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #0767fd;
}
</style>

Mein JavaScript:

<script type="text/javascript">  
function OrdnerSelection()  
{  
    var checkboxes = document.getElementsByClassName("check");  
    var numberOfCheckedItems = 0;  
    for(var i = 0; i < checkboxes.length; i++)  
    {  
        if(checkboxes[i].checked)  
            numberOfCheckedItems++;  
    }  
    if(numberOfCheckedItems > 3)  
    {  
        alert("Anzahl der auszuwählenden Dateien ist überschritten (max. 3)!");  
        return false;  
    }  
}
</script>

Checkboxen:

<input type="checkbox" name="op" value="1" id="checkop"><label for="checkop"> OP</label></input>
<input type="checkbox" name="im" value="1" id="checkim"><label for="checkim"> IM</label></input>
<input type="checkbox" name="ab" value="1" id="checkab"><label for="checkab"> AB</label></input>
<input type="checkbox" name="ek" value="1" id="checkek"><label for="checkek"> EK</label></input>

<?php
while ($zeile = mysqli_fetch_array( $db_erg, MYSQLI_ASSOC))
{
?>
<tr>
<td>
<label for="check[<?php echo $zeile['id']?>]" >
<input type="checkbox" class="check" name="check[<?php echo $zeile['id']?>]" onclick="return OrdnerSelection();" value="1" id="check[<?php echo $zeile['id']?>]"> <?php echo $zeile['name']?></label></input>
<input type="hidden" name="ergebnis[<?php echo $zeile['id']?>]" value="<?php echo $zeile['name'] ?>" ></input>
<input type="hidden" name="ev[<?php echo $zeile['id']?>]" value="1" ></input>
</td>   
</tr>

Kann mir vielleicht jemand einen Tipp geben wie ich das machen soll/kann?

VG
Sascha

[hellbringer]

Der HTML-Code ist schon mal fehlerhaft. [ und ] sind im ID-Attribut nicht erlaubt.

PHP-Code ist bei einem JavaScript-Problem übrigens nicht hilfreich. Bitte poste den tatsächlichen HTML-Code.

[tk1234]

Wenn ich jetzt aber hingehe und versuche die Boxen mit CSS farblich und auch die Form zu verändern, sind die Boxen welche ich mit JavaScript überwache nicht mehr da...

Logisch, du blendest sie ja per display:none aus und »input + label« greif eben bei <label><input></label> nicht …

Mein JavaScript:

var checkboxes = document.getElementsByClassName("check");
var numberOfCheckedItems = 0;
for(var i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].checked)
numberOfCheckedItems++;
}

was für eine umständliche Schreibweise für

const numberOfCheckedItems = document.querySelectorAll('.check:checked').length;

…
Das type-Attribut im script-Element ist auch überflüssig und die onclick-Attribute gehören durch Eventhandler ersetzt.

while ($zeile = mysqli_fetch_array( $db_erg, MYSQLI_ASSOC))

Ich werde es nie verstehen warum sich alle mit MySQLi rumquälen statt PDO zu verwenden …

Der HTML-Code ist schon mal fehlerhaft. [ und ] sind im ID-Attribut nicht erlaubt.

Doch. Falsch ist das HTML aber trotzdem: input ist ein leeres Element, </input> gibt es also nicht.

[Werner123]

Und keine alert()-Meldungen an den Benutzer senden, dies sollte in JavaScript nur für Debug-Ausgaben erfolgen (wobei console.log besser geeignet wäre).
Du hast mit JS die Möglichkeit, die Fehlermeldung direkt in das DOM der Seite einzufügen.