刷新后Checkbox未显示当前状态问题求助

问题核心是：你仅在首次创建复选框时用li.searchable设置了选中状态，但后续li.searchable值变化后，没有同步更新到对应的DOM元素上——普通JavaScript对象和DOM元素不存在自动双向绑定，必须手动触发同步逻辑。

具体解决方案 #

1. 提取独立的状态更新函数 #

把设置复选框状态的逻辑抽成复用函数，统一初始化和更新的入口：

function updateCheckboxState(lid, isChecked) {
    // 通过ID定位目标复选框
    const cb = jQuery(`#cb_${lid}`);
    if (cb.length) {
        cb.prop("checked", isChecked);
    }
}

2. 初始化时调用函数 #

创建复选框后，用这个函数完成初始状态设置：

var cb = jQuery("<input></input>", { 
    id: "cb_" + lid, 
    name: "cb_" + lid, 
    type: "checkbox" 
}).addClass("targetLayers_cb");
// 调用更新函数完成初始化
updateCheckboxState(lid, li.searchable);

3. 数据源变化时触发同步 #

在任何修改li.searchable的位置，立即调用更新函数同步状态：

// 示例：修改li.searchable的值
li.searchable = !li.searchable;
// 同步到对应复选框
updateCheckboxState(lid, li.searchable);

批量更新优化（多复选框场景） #

如果需要一次性更新所有复选框，可遍历数据源批量处理：

// 假设layers是所有li数据的数组
layers.forEach(li => {
    updateCheckboxState(li.lid, li.searchable);
});

原代码失效原因 #

cb.prop("checked", li.searchable)仅在元素创建时给DOM设置了一次属性值，后续li.searchable的变化不会自动映射到DOM——两者是独立的个体，必须通过手动代码完成状态同步。

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