基于Jquery实现Checkbox根据value自动更新checked属性失效求助

你的代码失效的关键是：模板引擎渲染到value属性的是字符串类型的"true"或"false"，但jQuery设置checked属性需要的是布尔值。在JS里，只要是非空字符串（哪怕是"false"）都会被当成true，所以不管value是什么，复选框都会被选中。

需要把字符串形式的value转成布尔值，再赋值给checked。另外注意HTML里的id重复问题——循环渲染时多个复选框用同一个id会出问题。

1. 修正JS代码 #

把value和"true"做严格对比，得到正确的布尔值：

$(document).ready(function () {
    $("input:checkbox").each(function () {
        const checkboxVal = $(this).val();
        // 模板用了|lower过滤器，所以值是小写的"true"/"false"
        $(this).prop('checked', checkboxVal === 'true');
    });
});

2. 修复HTML的id重复问题 #

循环渲染时，多个复选框用同一个id="validation"不符合HTML规范，会导致label关联失效，甚至JS选择器出错。改成动态id：

<tr class="checkbox_widget_button">
    <td>
        <div class="card-header"> {{item.validation}}</div>
    </td>
    <td>
        <form method="POST" name="validationFormName_{{item.id}}" id="validationFormId_{{item.id}}">
            {% csrf_token %}
            <div class="card-body">
                <input type="hidden" name="id" value="{{item.id}}">
                <input type="hidden" name="user_id" value="{{user.profile.custom_user_id}}">
                <!-- 同步修改label的for属性 -->
                <label for="validation_{{item.id}}">{{item.validate|lower}}</label>
                <!-- 把id改成带item.id的动态值 -->
                <input type="checkbox" name="validation" value="{{item.validate|lower}}"
                    id="validation_{{item.id}}">
            </div>
        </form>
    </td>
</tr>

如果你的模板引擎支持直接渲染布尔值到checked属性（比如Django的yesno过滤器），可以直接在HTML里设置，不用写JS：

<input type="checkbox" name="validation" {{ item.validate|yesno:"checked," }}
    id="validation_{{item.id}}">

这种方式更高效，也避免了JS处理的麻烦。

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