如何在 Django 模板中动态显示用户选中的多选框值（无需 AJAX 提交）-js教程-PHP中文网

如何在 Django 模板中动态显示用户选中的多选框值（无需 AJAX 提交）

本文介绍一种纯前端方案：通过 JavaScript 实时捕获用户在 Django 表单中勾选的 ModelMultipleChoiceField 复选框，并将选中用户的姓名动态渲染到模态框表格中，全程无需后端请求或页面刷新。

本文介绍一种纯前端方案：通过 javascript 实时捕获用户在 django 表单中勾选的 `modelmultiplechoicefield` 复选框，并将选中用户的姓名动态渲染到模态框表格中，全程无需后端请求或页面刷新。

在 Django 表单中使用 CheckboxSelectMultiple 渲染多对多字段（如 approvers）时，常需在提交前预览用户实际选择的对象（例如仅显示已勾选的审批人）。许多开发者试图通过 AJAX 将选中值传回 Django 视图再重渲染模板，但这不仅冗余，还引入不必要的请求开销和 CSRF 处理复杂度。更高效、更轻量的做法是：完全在前端完成数据采集与 DOM 更新。

✅ 正确做法：纯前端动态渲染

首先，精简 HTML 结构，移除服务端循环逻辑：

<!-- 移除 {% for entry in form.approvers %} 循环 -->
<div id="myModalavail" class="modal">
  <div class="modal-content">
    <span class="close"></span>
    @@##@@

    <div class="table56">
      <table class="table57">
<thead><tr>
<th class="title156">Name</th>
            <th class="title118">Available?</th>
          </tr></thead>
<tbody><!-- 留空，由 JS 动态填充 --></tbody>
</table>
</div>
    <button type="button" class="button210" id="modalcloseavail">Close</button>
  </div>
</div>

接着，用简洁可靠的 JavaScript 替代原 AJAX 请求逻辑：

基于jQuery的AJAX和JSON的实例中文WORD版

本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看

下载

$(document).ready(function() {
  const $modal = $("#myModalavail");
  $modal.hide(); // 初始隐藏模态框

  $("#avail").on("click", function(e) {
    e.preventDefault();

    // 获取所有被勾选的复选框（注意：Django CheckboxSelectMultiple 为每个选项生成独立 <input>）
    const $checkedInputs = $("input[name='approvers']:checked");

    // 清空 tbody
    $("table.table57 tbody").empty();

    // 遍历每个选中项，提取关联 label 文本（Django 默认生成 <label for="id_approvers_X">用户名</label>）
    $checkedInputs.each(function() {
      const inputId = $(this).attr("id");
      const userName = $(`label[for="${inputId}"]`).text().trim();
      if (userName) {
        const $row = $("<tr>")
          .append($("<td>").text(userName))
          .append($("</td>
<td>").text("Yes"));
        $("table.table57 tbody").append($row);
      }
    });

    $modal.show();
  });

  // 可选：点击关闭按钮隐藏模态框
  $("#modalcloseavail, .close").on("click", function() {
    $modal.hide();
  });
});<blockquote><p>? <strong>关键细节说明</strong>：Django 的 CheckboxSelectMultiple 会为每个选项生成形如 <input type="checkbox" name="approvers" value="2" id="id_approvers_2"> 和 <label for="id_approvers_2">Alice Smith</label> 的配对结构。因此我们通过 input[id] 匹配 label[for] 即可准确获取用户显示名，无需依赖后端传递 ID 或 JSON 数据。</p></blockquote>
<h3>⚠️ 注意事项与优化建议</h3>
<ul>
<li>
<strong>避免手动覆盖 __init__ 中的字段定义</strong>：如答案所示，approvers 字段的 queryset 应优先在模型层约束（如 limit_choices_to={'is_active': True}），而非在表单 __init__ 中重复设置；既提升可维护性，也减少出错可能。</li>
<li>
<strong>无需 clean() 方法</strong>：若无特殊校验逻辑，可安全移除空 clean() 方法，避免干扰默认验证流程。</li>
<li>
<strong>确保 jQuery 已加载</strong>：上述脚本依赖 jQuery，请确认 <script src="...jquery.min.js"></script> 在页面底部或 $(document).ready() 前已引入。</li>
<li>
<strong>样式兼容性</strong>：若复选框未正确绑定 id/for 关系（如自定义 widget 覆盖了默认渲染），请检查浏览器开发者工具中 <input> 与 <label> 的 id/for 属性是否严格匹配。</label>
</li>
</ul>
<h3>✅ 总结</h3>
<p>该方案以「零后端交互」实现选中数据的即时可视化，兼具高性能、低耦合与强可读性。它不依赖视图上下文（get_context_data）、不触发额外 HTTP 请求、不涉及 CSRF token 管理，且完全兼容 Django 默认表单渲染行为。当业务场景仅需前端预览（非持久化或权限校验），这是最直接、最稳健的实现路径。</p>
<img class="logo4" src="/static/images/threecircles.svg">
</td>
</tr>