Javascript-forum

Normale Version: Checkboxes absteigend mit auswählen
Sie sehen gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Moin,

ich benötige mal Eure Hilfe. Ich generiere mit php eine Liste aus einer DB. Jede Zeile ist aufsteigend durchnummeriert und beinhaltet eine Checkbox. Wenn man eine auswählt, sollen alle Checkboxes darüber, numerisch absteigend, mit ausgewählt werden.

Ich habe schon verschiedenen Sachen ausprobiert, aber es funktioniert nicht...

Hier der Code in verkürzter Form:
PHP-Code:
<table id="mySEARCH" class="shoppinglist-content">
<!-- ******************************************************************************** 
shopping list beginn-->
    <!-- script test start -->
    <?php
        
if(isset($_COOKIE['shoppinglist'])){
            $list $_COOKIE['shoppinglist'];
            $stmt $pdo->prepare("SELECT * FROM `$list`");
            $stmt->execute();
            $x 0;
            foreach($stmt as $item)
            $x++;?>
                <tr id="line<?php echo $x;?>" style="opacity: 1.0;">
                <td class="split-list"><input type="checkbox" id="split-list-<?php echo $x;?>" name="split-list" onchange="markAbove<?php echo $x;?>()" value="<?php echo $x;?>"></td>
                </tr>
                <script>
                    function markAbove<?php echo $x;?>(){
                        var choosedLine = document.querySelectorAll("input[type=checkbox]");
                        for(var i = <?php echo $x;?>; i > choosedLine.value; i--){
                            choosedLine.setAttribute("checked", "");
                        }
                        console.log(i);
                    }
                </script>
            <?php
            
}
        }else {
/******************************************************************************** shopping list end****/
            ?><tr><td></td><td></td><td>Keine Items vorhanden</td><td></td><td></td><td></td><td></td></tr><?php
        
}
    ?>
<!-- script test end -->
</table> 

[Bild: 20230517083630e6a7bebe3a62dd464dc6b4c6693d74bc.png]

Hat mir wer einen Tipp wie das funktionieren kann? Vielen Dank!
Scheint ja sehr kompliziert zu sein, meine Frage^^
Hallo,

Ich bin kein Profi aber frage mal ChatGPT. 
Hat gestern geholfen mein Problem zu lösen.

Gruß
Michael
So funktioniert es. Bei Stack Overflow fragen half... Wink

Code:
            const allCheckboxes = document.querySelectorAll('#mySEARCH input[type="checkbox"]');
            allCheckboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    let elem = this.closest('tr');
                    while (elem = elem.previousElementSibling) {
                        let isCheckbox = elem.querySelector('input[type="checkbox"]');
                        if (isCheckbox){
                            isCheckbox.checked = true;
                        }
                    }
                });
            });
Hi BastiBln,
sorry das du nicht zeitnah eine Antwort erhalten hattest. Natürlich wäre es schön gewesen wenn du in unserem Forum eine passende Antwort bekommen hättest. Aber leider hatte sich keiner gefunden der dein Code anschaut und eine Antwort findet. Leider war ich für ein paar Tage auch nicht aktiv und deswegen auch keine Antwort von mir.

Ich werden versuchen zwischendurch wenn ich Zeit habe Fragen zu beantworten. Ich fand das sehr aufrichtig das du eine Lösunge gefunden hast und diese hier mit uns teilst.

Viele Grüße

rzscout