如何用jQuery在Bootstrap模态框内创建动态复选框并获取选中项？

没问题，我来帮你一步步搞定这个需求！咱们从调整模态框结构、动态渲染复选框到最后获取选中项，一步步来：

第一步：调整模态框HTML结构 #

先给模态框的body部分加个专门放复选框的容器，这样后续可以动态把复选框渲染进去：

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 新增复选框容器，用来承载动态生成的复选框 -->
        <div id="checkbox-group" class="form-checks"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="confirm-btn">确认选择</button>
      </div>
    </div>
  </div>
</div>

第二步：动态渲染复选框到模态框 #

假设你已经拿到了要渲染的列表数据（比如叫softwareList，你可以替换成自己实际的数据源），修改show.bs.modal的事件逻辑，把列表转成复选框：

// 示例列表数据，替换成你实际获取到的列表
const softwareList = [
  { label: "软件版本1", value: "v1.0.0" },
  { label: "软件版本2", value: "v2.1.0" },
  { label: "软件版本3", value: "v3.0.1" }
];

$('#myModal').on('show.bs.modal', function (event) {
  const button = $(event.relatedTarget);
  const recipient = button.data('whatever'); // 从按钮拿到的模态框标题文本
  const modal = $(this);

  // 更新模态框标题
  modal.find('.modal-title').text(recipient);

  // 先清空容器，避免重复渲染旧的复选框
  const checkboxContainer = modal.find('#checkbox-group');
  checkboxContainer.empty();

  // 遍历列表，逐个生成复选框并添加到容器
  softwareList.forEach(item => {
    const checkboxItem = `
      <div class="form-check mb-2">
        <input class="form-check-input software-option" type="checkbox" value="${item.value}" id="opt-${item.value}">
        <label class="form-check-label" for="opt-${item.value}">
          ${item.label}
        </label>
      </div>
    `;
    checkboxContainer.append(checkboxItem);
  });
});

第三步：获取选中的复选框项 #

给确认按钮绑定点击事件，收集所有被选中的复选框值：

$('#confirm-btn').on('click', function() {
  // 收集所有选中的复选框值
  const selectedOptions = [];
  $('.software-option:checked').each(function() {
    selectedOptions.push($(this).val());
  });

  // 这里可以对选中的数据做后续处理，比如打印、提交接口等
  console.log('你选中的项：', selectedOptions);
  
  // 处理完后关闭模态框
  $('#myModal').modal('hide');
});

额外小提示 #

如果你的列表数据是通过按钮的data-*属性传递的（比如data-software-list），可以把softwareList替换成button.data('softwareList')，记得传递的时候要转成JSON格式（比如data-software-list='[{"label":"软件版本1",...}]'）。

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