如何使用modal获得多值复选框

<!-- 模态框 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <h2>选择你喜欢的颜色：</h2>
    <input type="checkbox" name="color" value="红色">红色<br>
    <input type="checkbox" name="color" value="蓝色">蓝色<br>
    <input type="checkbox" name="color" value="绿色">绿色<br>
    <button id="confirmBtn">确认</button>
  </div>
</div>

/* 模态框样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* 其他样式省略 */

// 获取模态框元素
var modal = document.getElementById("myModal");

// 获取确认按钮元素
var confirmBtn = document.getElementById("confirmBtn");

// 点击确认按钮时触发的事件
confirmBtn.onclick = function() {
  // 获取所有选中的复选框元素
  var checkboxes = document.querySelectorAll('input[name="color"]:checked');
  
  // 创建一个数组，用于存储选中的值
  var selectedValues = [];
  
  // 遍历选中的复选框元素，将值添加到数组中
  checkboxes.forEach(function(checkbox) {
    selectedValues.push(checkbox.value);
  });
  
  // 打印选中的值
  console.log(selectedValues);
  
  // 关闭模态框
  modal.style.display = "none";
}

// 其他代码省略