Flask项目中如何根据单选框选择打开对应Bootstrap模态框？

嘿，我来帮你搞定这个需求！你现在的问题是OK按钮的data-target是固定值，没法根据单选框的选择切换弹出不同的模态框对吧？咱们可以用JavaScript来动态处理这个逻辑，步骤很清晰：

第一步：准备对应选项的目标模态框 #

首先得先创建好CHOIX A和CHOIX B对应的两个模态框，分别给它们设置唯一的id，比如modalReferentiel和modalTransco，示例代码如下：

<!-- CHOIX A对应的模态框 -->
<div class="modal fade" id="modalReferentiel" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">更新CHOIX A</h4>
      </div>
      <div class="modal-body">
        <p>这里是CHOIX A的更新操作区域</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- CHOIX B对应的模态框 -->
<div class="modal fade" id="modalTransco" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">更新CHOIX B</h4>
      </div>
      <div class="modal-body">
        <p>这里是CHOIX B的更新操作区域</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

第二步：修改原选择模态框的OK按钮 #

给OK按钮加一个唯一id方便JS获取，同时移除原来固定的data-toggle和data-target属性（因为我们要动态控制）：

<div class="container">
  <!-- 原选择模态框 -->
  <div class="modal fade" id="modalchoix" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Souhaitez-vous mettre à jour :</h4>
        </div>
        <div class="modal-body">
          <input type="radio" id="referentiel" name="choixmaj" value="referentiel">
          <label for="referentiel"> CHOIX A</label><br>
          <input type="radio" id="transco" name="choixmaj" value="transco">
          <label for="transco"> CHOIX B</label><br>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <!-- 修改后的OK按钮 -->
          <button type="button" class="btn btn-default" id="btn-modal-ok">OK</button>
        </div>
      </div>
    </div>
  </div>
</div>

第三步：编写JavaScript逻辑处理动态弹出 #

在页面底部（或者独立JS文件中）添加这段代码，监听OK按钮的点击事件，根据选中的单选框弹出对应模态框：

// 等待DOM加载完成后执行
$(document).ready(function() {
  // 监听OK按钮点击
  $('#btn-modal-ok').click(function() {
    // 获取当前选中的单选框值
    const selectedChoice = $('input[name="choixmaj"]:checked').val();
    
    // 先关闭当前的选择模态框
    $('#modalchoix').modal('hide');
    
    // 根据选中值弹出对应模态框
    if (selectedChoice === 'referentiel') {
      $('#modalReferentiel').modal('show');
    } else if (selectedChoice === 'transco') {
      $('#modalTransco').modal('show');
    } else {
      // 如果没有选中任何选项，提示用户
      alert('请先选择一个更新选项！');
    }
  });
});

额外注意事项 #

• 确保你已经引入了jQuery和Bootstrap的JS文件（Bootstrap模态框依赖jQuery），可以在页面头部或底部添加：

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  

• 如果你是Flask项目，可以把这段JS代码放在模板的{% block scripts %}块中，或者单独创建JS文件通过url_for引入。

这样就能实现用户选择单选框后，点击OK弹出对应模态框的需求啦！

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