bootstrap multiselect - 单击一次取消选择/取消选中所有选项答案

【问题标题】：bootstrap multiselect - De-select / Uncheck all options in a single clickbootstrap multiselect - 单击一次取消选择/取消选中所有选项
【发布时间】：2014-05-06 08:36:45
【问题描述】：

我正在使用Bootstrap multiselect，我想添加一个选项以取消选中所有选定的选项。请为我提供相同的解决方案。感谢您的帮助:)

【问题讨论】：

Quick way to clear all selections on a multiselect enabled <select> with jQuery?的可能重复
@L_7337 这是一个引导多选，它是不同的。

标签： jquery bootstrap-multiselect

【解决方案1】：

您可以使用bootstrap-multiselect 文档here 中提到的.multiselect('refresh') 方法。

因此，在多选列表旁边添加一个 HTML 按钮/图标，然后使用以下代码：

$("#reset_client").click(function(){
  $('option', $('#select_client')).each(function(element) {
    $(this).removeAttr('selected').prop('selected', false);
  });
  $("#select_client").multiselect('refresh');
});

<select name="clients[]" multiple="multiple" id="select_client" style="display: none;">
    <option value="multiselect-all"> Select all</option>
    <option value="1">Client 1</option>
    <option value="2">Client 2</option>
    <option value="3">Client 3</option>
    <option selected="selected" value="4">Client 4</option>
    <option selected="selected" value="5">Client 5</option>
    <option value="6">Client 6</option>
    <option selected="selected" value="7">Client 7</option>
    <option value="8">Client 8</option>
</select>

<input type="button" value="Reset" name="reset_clients" id="reset_client" class="reset_button" title="Clear Selection">

【讨论】：

也为我工作。谢谢。

【解决方案2】：

您可以包含一个“全选”按钮，按两次将“取消全选”。为此，请添加此选项：

includeSelectAllOption:true

这将取消所有基于选择元素的引导多选。

function multiselect_deselectAll($el) {
    $('option', $el).each(function(element) {
        $el.multiselect('deselect', $(this).val());
    });
}

$('.multiselect').each(function() {
    var select = $(this);
    multiselect_deselectAll(select);
});

您可以手动添加一个“全选”选项，然后在按下该选项时调用重置功能。

见： https://github.com/davidstutz/bootstrap-multiselect/issues/271

【讨论】：

【解决方案3】：

使用下面的代码取消选择多选引导下拉菜单中的所有选择项

$("#ddlMultiSelectId").multiselect('clearSelection');

【讨论】：

【解决方案4】：

您可以使用“deselectAll”方法来做到这一点。

$("select.multiselect").multiselect("deselectAll", false);

告诉 jQuery 只针对“选择”是很重要的，否则它将失败。这是因为插件添加了具有相同类名的其他内容。

@L_7337 - 这不是您链接到的帖子的副本。这篇文章是关于如何取消选择所有选项，如果你使用Bootstrap Multiselect

另一篇文章是如何从普通的多选选项中取消选择。

最好的问候拉斯穆斯

【讨论】：

【解决方案5】：

如果你有以下多选：

<div class="form-group">
      <label>Choose Skills</label>
      <select id="DDL" name="selValue" class="selectpicker form-control"  multiple>
               <option value="1">One</option>
               <option value="2">Two</option>
               <option value="3">Three</option>
        </select>
  </div>

然后你可以使用下面的 jQuery 来取消选择所有选项，点击一个按钮：

$('#DDL').selectpicker("deselectAll", true).selectpicker("refresh");

【讨论】：

【解决方案6】：

试试这个：

$("#select_id option:selected").removeAttr("selected");

【讨论】：

@dhh，用户已经解释了场景，并且已经选择了一个不起作用的答案。我发布的答案只是为了更正所选答案。用户没有给出任何我可以帮助他完成这项工作的代码场景。还有，我们不是来给人家做作业的吧？我们只是建议实现目标的方式/路径。无论如何感谢您的宝贵意见。

【解决方案7】：

该问题已在 gitlab fork here 中修复

上面写着：

修复了取消全选时触发 onSelectAll 的问题

或者，我们可以等待issue #752 得到解决。它是在一个月前提出的。

【讨论】：

【解决方案8】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<div class="modal show" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <nav class="navbar navbar-default">
  <div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Channel(s)</a></li>
      <li><a href="#">Collaborator(s)</a></li>
    </ul>
  </div>
</nav>
      </div>
      <div class="modal-body">
        <form>              <div class="form-check row">
            <label class="col-sm-2 form-check-label" for="ListeningProject">Listening Project</label>
              <div class="col-sm-10">
                <input class="form-check-input" id="ListeningProject" value="" type="checkbox" />
              </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 form-check-label" for="AccountName">Select:</label>
            <div class="col-sm-10">
                <select class="form-control" id="AccountName" multiple="" required="">
                  <option>A Company</option>
                  <option>B Copany</option>
                  <option>C Company</option>
                  <option>D Company</option>
                </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
<script>
$("#ListeningProject").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('#AccountName option').prop('selected', status);
});
</script>
</body>
</html>

【讨论】：

【解决方案9】：

你可以这样做，它对我有用：

$('#dropdownID').val([]).multiselect('refresh')

【讨论】：

【解决方案10】：

试试这个

$("option:selected").prop("selected", false)

【讨论】：

这对我也不起作用，对我有用的是$('#multi-select-dropdown').multiselect("deselectAll", false).multiselect("refresh");