Django表单点击toggle开关时如何通过jQuery/Ajax修改布尔值

现存代码的核心问题 #

• 三个checkbox设置了完全重复的id="checkbox"，jQuery的$('#checkbox')选择器只会匹配到页面第一个开关，后续两个开关完全无法绑定交互事件，这是之前jQuery代码失效的核心原因。
• 给checkbox设置value="{{ shipping_us }}"的逻辑完全错误：页面初次加载时这些模板变量不存在，value会被渲染为空值；Django的BooleanField(required=False)对checkbox的识别规则是：只要POST请求中携带了对应name的参数，就会解析为True，参数缺失时才为False，根本不需要手动给checkbox绑定value属性。
• 原jQuery逻辑存在硬编码错误：不管点击哪个开关，都会把三个shipping字段全部赋值为当前开关的checked状态，完全不符合独立开关的交互逻辑。
• 表单缺少提交按钮，页面初次加载时用户无法触发表单的正常提交流程，所有交互全依赖未生效的jQuery逻辑。
• 视图层存在两处语法bug：context配置里的'csv_form':csv_form.多写了句点，校验不通过的分支里把类名CsvForm错写为CSVForm，会触发名称未定义错误。

分步骤修复方案 #

1. 修复模板层的表单结构 #

去掉重复的元素id，移除无效的value绑定，补充基础的提交按钮：

<form accept-charset="UTF-8" action="{% url 'submit'%}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-row">
        <div class="name">Shipping Options/US</div>
        <label class="switch">
            <input type="checkbox" name="shipping_us">
            <span class="slider round"></span>
        </label>
    </div>
    <div class="form-row">
        <div class="name">Shipping Options/Europe</div>
        <label class="switch">
            <input type="checkbox" name="shipping_europe">
            <span class="slider round"></span>
        </label>
    </div>
    <div class="form-row">
        <div class="name">Shipping Options/Asia</div>
        <label class="switch">
            <input type="checkbox" name="shipping_asia">
            <span class="slider round"></span>
        </label>
    </div>
    <button type="submit">提交</button>
</form>

2. 修复视图层的语法错误 #

修正大小写错误和多余的语法符号，保证表单校验逻辑正常运行：

from django.shortcuts import render
from .forms import CsvForm

def submit(request):
    csv_form = ''
    if request.method == 'POST':
        csv_form = CsvForm(request.POST)
        if csv_form.is_valid():
           shipping_us = csv_form.cleaned_data['shipping_us']
           shipping_europe = csv_form.cleaned_data['shipping_europe']
           shipping_asia = csv_form.cleaned_data['shipping_asia']
           context= {
               'shipping_us': shipping_us,
               'shipping_europe': shipping_europe,
               'shipping_asia': shipping_asia,
               'csv_form': csv_form
           }
           return render(request,'submit.html', context)
        else:
           # 修正之前的类名大小写错误
           csv_form = CsvForm()
           context = {'csv_form':csv_form}
           return render(request,'submit.html',context)
    else:
      return render(request,'submit.html')

3. 适配无刷新提交的jQuery交互 #

如果需要实现点击toggle就即时提交、不刷新页面的效果，调整jQuery选择器与提交逻辑，保证每个开关独立传值：

$(document).ready(function() {
    // 直接选中switch组件下的所有checkbox，规避重复id的选择问题
    $('.switch input[type="checkbox"]').change(function() {
        // 获取当前点击开关的字段名和选中状态
        const targetField = $(this).attr('name');
        const fieldValue = this.checked;
        $.post("{% url 'submit' %}", {
            [targetField]: fieldValue,
            csrfmiddlewaretoken: '{{ csrf_token }}' 
        });
    });
});

注意：单独通过Ajax提交某一个开关的状态时，另外两个未传的字段会被Django表单解析为False，如果需要保留之前已选中的字段值，需要在视图层先取出数据库/会话中存储的旧值，合并到POST数据中再传入表单校验。

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