要为Bootstrap Multiselect表单/列表添加“全选”功能,可以使用以下方法:
- 添加一个“全选”选项到下拉菜单中。可以在下拉菜单的最上方添加一个选项,比如“全选”。可以使用Bootstrap的dropdown组件来创建下拉菜单。
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Options <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" class="select-all">Select All</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" class="option">Option 1</a></li>
<li><a href="#" class="option">Option 2</a></li>
<li><a href="#" class="option">Option 3</a></li>
<!-- 添加其他选项 -->
</ul>
</div>
- 使用JavaScript来实现“全选”功能。可以使用jQuery来处理事件和选项的选择状态。
$(document).ready(function() {
$('.select-all').click(function() {
$('.option').each(function() {
$(this).prop('selected', true);
});
$('.dropdown-toggle').dropdown('toggle');
});
});
以上代码将在文档加载完成后,为“全选”选项绑定了一个点击事件。当点击“全选”选项时,它将遍历所有的选项,并将它们的选中状态设置为true。然后,使用.dropdown('toggle')方法来关闭下拉菜单。
请注意,以上代码仅适用于Bootstrap Multiselect的基本功能。如果使用的是其他版本或自定义样式,请根据具体情况进行调整。