Question

我在多选列表上使用bootstrap multiselect插件，在按钮点击事件中我必须进行ajax调用。

我可以从插件文档中看到onSelectAll事件有助于检测用户按下时选择所有选项

 http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onSelectAll

但是也可以在按钮点击事件上检查相同的内容。我的多选初始化如下所示

     $(function () {
        $("#SelectedListA").multiselect({
            enableCaseInsensitiveFiltering: true,
            includeSelectAllOption: true               
        });          

    });

点击按钮的事件就像

   $("#btn_loadSchools").click(function(){

            var all_selected= ???  //any way to detect whether all items are selected or not
            FillDropdownSchools(all_selected,$('#SelectedListA').val());
        });

    var FillDropdown2 = function (all_selected,selectedItems) {
    }

Answer 1

为此“全部选定”状态定义全局变量。

然后使用onSelectAll处理程序，为其设置true 并使用onChange处理程序，将其设置为false。

现在，在按钮的click处理程序中，只需检查此变量。

var allSelected = false;

$('#example-onSelectAll').multiselect({
  includeSelectAllOption: true,
  onSelectAll: function(){
    allSelected = true;
  },
  onChange: function(){
    allSelected = false;
  }
});

$("#btn_loadSchools").click(function(){
  if(allSelected){
    alert("Yes!");
  }else{
    alert("No.");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>

<select id="example-onSelectAll" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozarella">Mozzarella</option>
  <option value="mushrooms">Mushrooms</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="onions">Onions</option>
</select>

<button id="btn_loadSchools">Check if all selected</button>

按钮单击时勾选Bootstrap Multiselect check select all

1 个答案: