如何通过Ajax响应结果勾选HTML复选框

看起来你是在用Bootstrap Toggle插件美化复选框，想通过Ajax返回的脚本来勾选它对吧？直接设置原生复选框的checked属性可能不会让Toggle的UI同步更新，因为插件会生成自定义的开关组件，需要额外处理。

下面是具体的解决步骤和代码示例：

1. 定位并设置原生复选框状态 #

首先，先获取到你的原生复选框元素，然后设置它的checked属性：

// 获取复选框元素
const saleSmsCheckbox = document.getElementById('sale-sms');
// 设置为勾选状态
saleSmsCheckbox.checked = true;

2. 刷新Bootstrap Toggle组件同步UI #

因为Bootstrap Toggle会把原生复选框隐藏，生成自己的开关UI，所以设置完原生状态后，需要调用插件的refresh方法来更新UI：

// 如果你用的是jQuery版本的Bootstrap Toggle
$('#sale-sms').toggle('refresh');

// 如果你用的是原生JS版本的Bootstrap Toggle（部分版本支持）
if (saleSmsCheckbox.toggle) {
  saleSmsCheckbox.toggle.refresh();
}

为什么直接设置checked不行？ #

Bootstrap Toggle插件会维护自己的内部状态和UI，原生复选框只是作为数据源存在。当你直接修改原生复选框的checked属性时，插件不会自动感知到这个变化，所以必须手动调用refresh方法来让UI和原生状态同步。

把这段逻辑放到Ajax响应的脚本里 #

如果你的Ajax响应返回的是可执行脚本，直接把上面的代码放在返回的脚本内容里即可，确保执行时页面上的sale-sms元素已经存在（你的场景应该满足这一点）。

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