复选框选择控制台记录复选框选择的名称并将其放入阵列中

Question

嗨，我只是想知道这是我们可以控制台的一种方式吗？log复选框是check？并显示正确的名称，例如monday is check it display monday in console.log，如果取消选中此monday display消失了？

如果可能的话，我也想把它放进一个数组中？

类似这样的东西，但是这个数组取决于选中的复选框？

[{"Day":"Monday"},{"Day":"Tuesday"},{"Day":"Wednesday"},{"Day":"Thursday"},{"Day":"Friday"},{"Day":"Saturday"},{"Day":"Sunday"}]

<div class="box">
<input type="checkbox" class="weekly-day" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" class="weekly-day" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" class="weekly-day" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" class="weekly-day" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" class="weekly-day" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" class="weekly-day" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" class="weekly-day" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>

Answer 1

如果为输入触发change事件时添加事件侦听器，则可以添加该功能。

const box = document.getElementsByClassName("box")[0];
const inputs = box.getElementsByTagName("input");
for (const input of inputs) {
input.addEventListener("change", () => logValues());
}
function logValues() {
const output = [];
for (const input of inputs) {
output.push([input.value, input.checked]);
}
console.log(output);
}

<div class="box">
<input type="checkbox" class="weekly-day" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" class="weekly-day" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" class="weekly-day" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" class="weekly-day" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" class="weekly-day" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" class="weekly-day" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" class="weekly-day" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>