mardi 4 mai 2021

How can I console.log() the values of selected checkboxes in a dropdown on each modification?

How can I console.log() the values of selected checkboxes in a dropdown on each modification?

Looking at the following code, I have a dropdown with multiple checkboxes. I would like to be able to console.log() the value of each checkbox that is checked and I would like to make a new log every time a change happens.

For example, if checkbox 1 and 2 are checked the console would log the value of 1 and 2, if I uncheck 2 there is a new console.log() with only the value of 1, if I now check 3 there is a new log with 1 and 3 and so on ...

<script>
    document.addEventListener('DOMContentLoaded', function() {
        
        let boards;
        let listBoards;
        listBoards = $('#boards_list');

        function displayList() {
            let html = "";
            for (let b of boards) {
                html += '<li><input id='+ b.id +' type="checkbox" class="boardCheckList" name="boardList" value=' + b.id + '> ' + b.title + '<span style="background-color:red" class="badge">New</span></li>';
            }
            listBoards.html(html);
        }
        
        function getBoards() {
            $.get("calendar/get_boards_to_display_service/", function(data) {
                boards = data;
                displayList();
            }, "json").fail(function() {
                listBoards.html('<li><a class="dropdown-item" href="#">Error encountered while retrieving the boards!</a></li>');
            });
        }

        getBoards();

        
    });
</script>
<div class="container">
    <div class="row">
        <div class="col-2">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuCalendar" aria-haspopup="true" data-toggle="dropdown" aria-expanded="false">
                    Boards
                </button>
                <ul id="boards_list" class="dropdown-menu" aria-labelledby="dropdownMenuCalendar">

                </ul>
            </div>
        </div>
    </div>
</div>



Aucun commentaire:

Enregistrer un commentaire