全选/取消全选Bootstrap Select插件 [英] Select all / Unselect all in Bootstrap Select plugin

问题描述

<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' data-size="5" data-selected-text-format="count>2">
                <option value="All" selected="selected">All Ratings</option>
                <option value="EC">EC (Early Childhood)</option>
                <option value="E">E (Everyone)</option>
                <option value="E10+">E10+ (Everyone 10+)</option>
                <option value="T">T (Teen)</option>
                <option value="M">M (Mature)</option>
                <option value="AO">AO (Adults Only)</option>
            </select>

上面的html中有值为All的选项.如果要选择该选项，我想选择所有项目；如果我取消选择此选项，则要取消选择所有项.

In html above there are option with value All. I want to select all items if that option is selected and unselect all if i unselect this option.

我认为这很简单，但是我不明白为什么$('#divRatings').change(function(){//some logic});

I think it will be simple to do, but i can't get why nothing happens on $('#divRatings').change(function(){//some logic});

我选择/取消选择项目的功能:

My function to select/ unselect items:

  function toggleSelectAll(control) {
    if (control.val().indexOf("All,") > -1) {
        control.selectpicker('selectAll');
    } else {
        control.selectpicker('deselectAll');
    }
}

JSFiddle示例

推荐答案

javascript的问题是，如果用户仍然单击所有评分"选项，则用户只要单击任何您选择的选项，就可以检查所有其他选项(即使您只需取消选中任何选项).如果未选中所有等级"，则取消选中所有其他选项.因此，实际上只有所有评级"选项是可单击的.如果您单击任何其他选项，则会在您的onchange处理程序中立即选中/取消选中该选项.

Problem with your javascript is that anytime user clicks any option you check, if "All ratings" option is still checked - you check all other options too (even if you just unchecked any option). And if "All ratings" is unchecked, you uncheck all other options. So, in fact only "All ratings" option is clickable. If you click any other option, it's immediatelly checked/unchecked in your onchange handler.

尝试以下代码:

function toggleSelectAll(control) {
    var allOptionIsSelected = (control.val() || []).indexOf("All") > -1;
    function valuesOf(elements) {
        return $.map(elements, function(element) {
            return element.value;
        });
    }

    if (control.data('allOptionIsSelected') != allOptionIsSelected) {
        // User clicked 'All' option
        if (allOptionIsSelected) {
            // Can't use .selectpicker('selectAll') because multiple "change" events will be triggered
            control.selectpicker('val', valuesOf(control.find('option')));
        } else {
            control.selectpicker('val', []);
        }
    } else {
        // User clicked other option
        if (allOptionIsSelected && control.val().length != control.find('option').length) {
            // All options were selected, user deselected one option
            // => unselect 'All' option
            control.selectpicker('val', valuesOf(control.find('option:selected[value!=All]')));
            allOptionIsSelected = false;
        } else if (!allOptionIsSelected && control.val().length == control.find('option').length - 1) {
            // Not all options were selected, user selected all options except 'All' option
            // => select 'All' option too
            control.selectpicker('val', valuesOf(control.find('option')));
            allOptionIsSelected = true;
        }
    }
    control.data('allOptionIsSelected', allOptionIsSelected);
}

$('#divRatings').selectpicker().change(function(){toggleSelectAll($(this));}).trigger('change');

http://jsfiddle.net/bu5vjdk6/4/

更新的代码
http://jsfiddle.net/surajkm33/tsomyckj/

Updated code
http://jsfiddle.net/surajkm33/tsomyckj/

这篇关于全选/取消全选Bootstrap Select插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！