multiCheckboxSelect.js是一个JavaScript库，用于美化和增强原生＜select＞元素。兼容jQuery和Vanilla JavaScript。

特征：

• 使用现有的选择元素。
• 允许从JS数组加载选项。
• 自动将复选框附加到每个选项。
• 启用“父项”复选框以选中所有选项。

请参阅实际操作：

如何使用它:

1.加载样式表多复选框-选择.css和JavaScript多复选框-选择.js在文档中。

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
 
<!-- multiCheckboxSelect.js -->
<link rel="stylesheet" href="css/multi-checkbox-select.css" />
<script src="js/multiCheckboxSelect.js"></script>

2.创建一个空选择元素，如果您更喜欢从JS数组加载选项。

<select id="example"></select>

3.调用选择元素，并定义您自己的选项，如下所示。

// Options
var options = {
    data: ['option1', 'option2', 'option3'],
    multiple: true, // enable multi select
}
 
// Vanilla JavaScript
multiCheckboxSelect('#example', options);
 
// jQuery
$('#example').multiCheckboxSelect(options)

4.您也可以直接在现有的选择要素

<select id="example" multiple>
  <option value="javascript">JavaScript</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="jquery">jQuery</option>
</select>

5.自定义占位符和条目文本。

var options = {
    placeholder: 'Select Languages',
    entryName: 'Language',
    data: ['JavaScript', 'HTML', 'CSS3', 'jQuery', 'Angular', 'ReactJS', 'VueJS'],
    multiple: true
}

预览截图

jQuery和Vanilla JS中 多复选框选择插件