jQuery Multiselect - 选择所有事件处理程序答案

【问题标题】：jQuery Multiselect - Select All Event HandlerjQuery Multiselect - 选择所有事件处理程序
【发布时间】：2016-07-12 08:56:12
【问题描述】：

我有一个 jQuery 多选，默认选中所有选项。每当所选选项发生变化时，我都会相应地重新加载页面数据。

除了单击“全选”按钮不会触发 onChange 事件并且单击该按钮时我无法重新加载数据之外，一切都很好。我也尝试将事件处理程序附加到 checkAll 和 selectAll 但无济于事。

$("#testselect").multiselect({
        nonSelectedText: 'None',
        allSelectedText: 'All Selected',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        checkAll: function () {
            alert("check all"); // Doesn't work
        },
        selectAll: function () {
            alert("select all"); // Doesn't work
        },
        onChange: function (option, checked, select) {
            alert("onchange") // Works but not for 'All Selected'
            // Do something
        }
});
$("#testselect").multiselect('selectAll', false);
$("#testselect").multiselect('updateButtonText');

【问题讨论】：

这是您使用的多选吗？ erichynds.com/blog/jquery-ui-multiselect-widget 因为我没有看到 onChange() 方法

标签： javascript jquery multi-select jquery-multiselect

【解决方案1】：

添加主复选框：

<th>SELECT ALL<br/><input type="checkbox"  onClick="toggle(this)" /></th>

添加脚本：

          <script>

          function toggle(source) {
           checkboxes = document.getElementsByName('checkbox[]');
           if(x=1)
           {
             for(var i=0, n=checkboxes.length;i<n;i++) {
               checkboxes[i].checked = source.checked;
             }}}



           </script>

添加您喜欢按主要选择的复选框：

<input name="checkbox[]"    type="checkbox" >

【讨论】：

【解决方案2】：

这对我有用。

$(document).on('click', '.ms-selectall', function( event ){
        //your code
});

【讨论】：

【解决方案3】：

使用 onSelectAll 和 onDeselectAll 事件来代替 checkAll 和 selectAll

例子：

$("#testselect").multiselect({
        nonSelectedText: 'None',
        allSelectedText: 'All Selected',
        includeSelectAllOption: true,
        buttonWidth: '100%',
        onChange: function (option, checked, select) {
            alert("onchange") // Works but not for 'All Selected'
        },
        onSelectAll: function () {
            console.log("call when select all");
        },
        onDeselectAll: function () {
            console.log("call when deselect all");
        }
});

【讨论】：