如何将Django字典传递到JS并设置Checkbox选中状态？

核心问题梳理 #

1. Django传递的字典是Python语法格式（单引号），无法直接被JavaScript识别为合法对象
2. HTML中的Checkbox未设置唯一id，JS无法通过键值匹配对应元素
3. 视图中数据库更新逻辑错误，会修改所有Logs记录而非当前实例

分步解决方案 #

1. 修正Django视图：规范数据传递与数据库更新 #

修改views.py中的plane函数，将Python字典转为标准JSON字符串传递，并修复更新逻辑：

def plane(request,pk):
    log_instance = Logs.objects.get(pk=pk)

    if request.method == 'POST':
        checkbox_dict_json = request.POST.get('checkboxDict')
        if checkbox_dict_json:
            checkbox_dict = json.loads(checkbox_dict_json)
            # 修正字段名，匹配模型中的checkbox_dict
            log_instance.checkbox_dict = checkbox_dict
            # 仅更新当前实例，而非所有Logs记录
            log_instance.save()
    
    # 将Python字典转为标准JSON字符串，方便JS解析
    checkbox_json = json.dumps(log_instance.checkbox_dict)

    return render(request, 'project/plane.html', {'checkbox_json': checkbox_json})

2. 修正HTML：给Checkbox添加唯一ID #

为每个Checkbox设置唯一id（如按座位编号命名），确保JS能精准匹配：

<form method="POST" action="" id="myForm">
    {% csrf_token %}
    <!-- 添加隐藏字段用于提交JSON数据 -->
    <input type="hidden" name="checkboxDict" id="checkboxDict">
    <div class="a">
        <table>
            <tr>
                <td><input type="checkbox" name="seat" id="seat_1"></td>
                <td><input type="checkbox" name="seat" id="seat_2"></td>
                <td><input type="checkbox" name="seat" id="seat_3"></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="seat" id="seat_4"></td>
                <td><input type="checkbox" name="seat" id="seat_5"></td>
                <td><input type="checkbox" name="seat" id="seat_6"></td>
            </tr>
            <!-- 剩余行按此规则添加唯一id -->
        </table>
    </div>
    <button type="submit" id="sub">提交</button>
</form>

3. 修正JavaScript：接收数据并设置Checkbox状态 #

使用JSON.parse()解析Django传递的JSON字符串，遍历字典设置对应Checkbox的选中状态：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 处理表单提交逻辑
    const form = document.querySelector('#myForm');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        const checkboxDict = {};
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkboxDict[checkbox.id] = checkbox.checked;
        });
        document.querySelector('#checkboxDict').value = JSON.stringify(checkboxDict);
        form.submit();
    });

    // 接收Django传递的JSON数据，设置Checkbox选中状态
    const checkboxData = JSON.parse('{{ checkbox_json|escapejs }}');
    if (checkboxData) {
        Object.entries(checkboxData).forEach(([id, isChecked]) => {
            const checkbox = document.getElementById(id);
            if (checkbox) checkbox.checked = isChecked;
        });
    }
});
</script>

关键修正说明 #

• 用json.dumps()将Python字典转为标准JSON字符串，避免Python语法（单引号）导致JS解析失败
• 使用|escapejs过滤器转义JSON中的特殊字符，确保安全注入到JavaScript环境
• 为Checkbox添加唯一id，保证字典键与元素一一对应
• 用log_instance.save()替代Logs.objects.update()，仅修改当前用户的记录

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