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