如何在Django模板的JavaScript中获取CheckboxSelectMultiple的值

原JavaScript代码无法正常工作的核心问题：

• Django的CheckboxSelectMultiple会渲染出多个独立的复选框，每个复选框的ID是id_testrever_0、id_testrever_1这类格式，而非单个#id_testrever元素，直接绑定该ID的change事件无法触发。
• 即使绑定正确，$("#id_testrever").val()对于多选组件返回的是选中值的数组，直接和单个字符串比较逻辑错误。
• 代码中提到的Mangoes选项在表单定义中不存在，属于无效判断。
• 原逻辑是追加内容，会导致重复选中时email字段内容不断累加，不符合预期。

根据需求，提供两种常见实现方式：

方式一：实时覆盖email字段为所有选中值 #

每次复选框状态变化时，将所有选中的选项拼接后设置到email字段：

<script>
$(function(){
  // 监听所有testrever复选框的变化事件
  $("input[name='testrever']").change(function(){
    // 收集所有选中的复选框值，用逗号分隔拼接成字符串
    var selectedValues = $("input[name='testrever']:checked").map(function(){
      return $(this).val();
    }).get().join(', ');
    
    // 将拼接后的内容设置到email字段
    $("#id_email").val(selectedValues);
  });
});
</script>

方式二：选中追加、取消移除单个选项 #

实现选中时追加选项值到email，取消选中时移除对应值的逻辑：

<script>
$(function(){
  $("input[name='testrever']").change(function(){
    var emailVal = $("#id_email").val() || '';
    var currentVal = $(this).val();
    
    if ($(this).is(':checked')) {
      // 选中时，若值未在email中则追加
      if (emailVal.indexOf(currentVal) === -1) {
        $("#id_email").val(emailVal + (emailVal ? ', ' : '') + currentVal);
      }
    } else {
      // 取消选中时，过滤掉对应值并更新email
      var updatedVal = emailVal.split(', ')
        .filter(item => item !== currentVal)
        .join(', ');
      $("#id_email").val(updatedVal);
    }
  });
});
</script>

• 确保模板中email字段的ID是id_email（Django表单默认生成的ID格式），若自定义了ID需对应修改选择器。
• 若后续需要添加Mangoes选项，只需在forms.py的LIST数组中加入('Mangoes', 'Mangoes')，上述JS代码会自动兼容新选项。

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