如何将模态框中选中的checkbox值传递到父页面并显示

你的代码存在几个关键问题，导致功能无法实现，以下是修正方案：

错误点分析 #

• 所有复选框未添加name="check"属性，jQuery选择器$("input[name='check']:checked")无法匹配到任何元素
• 所有复选框的value属性均为"check"，无法区分不同选项的选中状态
• 多个复选框使用了相同的id="flexCheckDefault"，违反HTML中ID必须唯一的规则
• 缺少Bootstrap JavaScript文件，模态框的弹出/关闭功能无法正常工作

修正后的完整代码 #

HTML部分 #

<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="row">
  <div class="col">
    <div class="">
      <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Selected parameters </button>
    </div>
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content" id="editor">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">Selection of parameters</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body fs-6">
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option1" id="flexCheckDefault1">
                  option1
                </label>
            </div>
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option2" id="flexCheckDefault2">
                  option2
                </label>
            </div>
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option3" id="flexCheckDefault3">
                  option3
                </label>
            </div>
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option4" id="flexCheckDefault4">
                  option4
                </label>
            </div>
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option5" id="flexCheckDefault5">
                  option5
                </label>
            </div>
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option6" id="flexCheckDefault6">
                  option6
                </label>
            </div>
            <div class="form-check">
              <label><input class="form-check-input" type="checkbox" name="check" value="option7" id="flexCheckDefault7">
                  option7
                </label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="btnSave">Update</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <p id="demo"></p>
  </div>
</div>

JavaScript部分 #

$(function() {
  $('#btnSave').click(function() {
    var favorite = [];
    $.each($("input[name='check']:checked"), function() {
      favorite.push($(this).val());
    });
    $('#demo').html(favorite.join(", "));
    $('#staticBackdrop').modal('hide');
  });
});

修正说明 #

1. 为每个复选框添加了name="check"属性，确保jQuery选择器能正确匹配
2. 将每个复选框的value修改为对应的选项文本（如option1、option2），这样选中后能显示正确内容
3. 为每个复选框设置了唯一的id，符合HTML规范
4. 添加了Bootstrap的CSS和JS文件，确保模态框功能正常运行
5. 将btnSave按钮的type="submit"改为type="button"，避免不必要的表单提交行为

现在点击"Selected parameters"按钮打开模态框，选中需要的选项后点击"Update"，选中的选项值会以逗号分隔的形式显示到右侧的区域，同时模态框自动关闭。

内容的提问来源于stack exchange，提问作者Jhilmil Jain