为何Django模型值无法正确设置表格中checkbox的选中状态？

我在Django项目中实现了一个包含Checkbox的表格，Checkbox的勾选状态对应Subscriber模型的participates布尔字段。视图已将所有Subscriber对象传入模板（context = {'subscribers' : Subscriber.objects.all(),}），但页面加载时所有Checkbox均未选中——尽管通过Django后台确认数据库中部分记录的participates值为True。表格中的firstName和lastName能正常显示，请问问题出在哪里？

原代码如下：

<head>
    <meta charset="UTF-8">
    <title>Participants</title>
    <script>
    function checkBox() {
        if({{ x.participates }}){
              document.getElementById("checkbox").checked = true;
        } else {
              document.getElementById("checkbox").checked = false;
        }
    }
    </script>
</head>
<body>
  <table>
  {% for x in subcribers %}
      <tr>
          <form action="updateSuscribers/{{ x.id }}" method="post">
              {% csrf_token %}                
              <td>{{ x.firstName }}</td>
              <td>{{ x.lastName }}</td>
              <td>
                  <input id="checkbox" type="checkbox" name="participates" onload="checkBox()">
              </td>           
          </form>
      </tr>
  {% endfor %}
  </table>
</body>

核心问题点 #

1. 重复ID导致JS无法定位元素：循环中每个Checkbox都使用了相同的id="checkbox"，document.getElementById只能找到第一个匹配的元素，后续Checkbox无法被JS处理。
2. Django布尔值与JS语法不兼容：Django模板渲染布尔值时，True会输出为首字母大写的字符串True，但JS中的布尔值是小写的true，导致if({{ x.participates }})会被解析为if(True)——JS会把True视为未定义变量，条件始终不成立。
3. onload事件无效：<input>元素没有onload事件，你的checkBox函数根本不会被触发。
4. 模板变量拼写错误：循环标签中写的是{% for x in subcribers %}，但视图传入的变量是subscribers（少了一个s），虽然你说姓名能正常显示，大概率是笔误，仍需修正。

最优修复方案（无需JS） #

直接利用Django模板的条件渲染，给Checkbox添加checked属性，这是最简洁可靠的方式：

<head>
    <meta charset="UTF-8">
    <title>Participants</title>
</head>
<body>
  <table>
  {% for x in subscribers %}
      <tr>
          <form action="updateSuscribers/{{ x.id }}" method="post">
              {% csrf_token %}                
              <td>{{ x.firstName }}</td>
              <td>{{ x.lastName }}</td>
              <td>
                  <!-- 直接通过模板条件判断添加checked属性 -->
                  <input type="checkbox" name="participates" {% if x.participates %}checked{% endif %}>
              </td>           
          </form>
      </tr>
  {% endfor %}
  </table>
</body>

若坚持使用JS的修复方式 #

如果一定要用JS控制状态，需保证每个Checkbox有唯一ID，并将Django布尔值转换为JS兼容的格式：

<head>
    <meta charset="UTF-8">
    <title>Participants</title>
    <script>
    function checkBox(checkboxId, isChecked) {
        const checkbox = document.getElementById(checkboxId);
        if (checkbox) {
            checkbox.checked = isChecked;
        }
    }
    </script>
</head>
<body>
  <table>
  {% for x in subscribers %}
      <tr>
          <form action="updateSuscribers/{{ x.id }}" method="post">
              {% csrf_token %}                
              <td>{{ x.firstName }}</td>
              <td>{{ x.lastName }}</td>
              <td>
                  <!-- 给每个Checkbox设置唯一ID，并用lower过滤器转换布尔值 -->
                  <input id="checkbox-{{ x.id }}" type="checkbox" name="participates" onload="checkBox('checkbox-{{ x.id }}', {{ x.participates|lower }})">
              </td>           
          </form>
      </tr>
  {% endfor %}
  </table>
</body>

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