使用jQuery multiselect插件时如何将复选框调整到选项文本左侧

首先确认你使用的jQuery multiselect插件分支，主流版本的配置方案如下：

1. 常用的jQuery UI Multiselect（eric hynds版本） #

直接在初始化时新增checkboxPosition配置即可生效：

$('#目标选择框ID').multiselect({
  // 你之前的其他配置项保持不变
  checkboxPosition: 'left'
});

如果是较老的版本不支持该配置，可以直接用CSS覆盖调整，不需要修改插件源码：

.ui-multiselect-menu li label input[type="checkbox"] {
  float: left;
  margin-right: 8px;
}
.ui-multiselect-menu li label span {
  padding-left: 0;
  display: inline-block;
}

2. Bootstrap生态下的jQuery Multiselect #

初始化时配置optionLabelPosition参数即可：

$('#目标选择框ID').multiselect({
  // 你之前的其他配置项保持不变
  optionLabelPosition: 'after'
});

该参数表示选项文本放在复选框之后，自然就会把复选框渲染到文本左侧。

如果使用的是其他二次封装的分支没有对应配置项，都可以参考上面的CSS方案，调整选择器匹配你实际的DOM结构，提升样式优先级覆盖插件默认样式即可实现效果。

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