复选框选择控制台记录复选框选择的名称并将它们放入数组中？答案

【问题标题】：Checkbox select console log the checkbox selected name and put them into an array?复选框选择控制台记录复选框选择的名称并将它们放入数组中？
【发布时间】：2022-01-25 01:19:22
【问题描述】：

嗨，我只是想知道这是一种我们可以 console.log 复选框被选中的方式吗？并显示正确的名称，比如星期一是检查它在 console.log 中显示星期一，如果取消选中这个星期一显示消失了？

如果可能的话，我也希望它把它放入一个数组中？

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

[{"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>

【问题讨论】：

您如何尝试记录它们是否被检查？什么时候应该记录？
我认为您可以尝试获取<div>，然后循环遍历它以获取所有<input>s 并将它们的onchange attribute 更改为检查是否已检查的函数，如果是，@987654328 @ 它。如果没有，console.clear() 清除控制台。
或者，您可以为<input>s 逐个添加侦听器，方法是先通过ids 找到它们，然后以相同的方式更改属性。

标签： javascript html arrays

【解决方案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>

【讨论】：