在Bootstrap Select插件中选择all / Unselect all

2"> All Ratings EC (Early Childhood) E (Everyone) E10+ (Everyone 10+) T (Teen) M (Mature) AO (Adults Only)  

在上面的html中，有值为All选项。 如果选择了该选项，我想选择所有项目，如果取消选择此选项，则取消选择全部。

我认为这样做很简单，但我无法$('#divRatings').change(function(){//some logic});为什么$('#divRatings').change(function(){//some logic});上没有任何$('#divRatings').change(function(){//some logic});

我选择/取消选择项目的function：

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

JSFiddle的例子

Answer 1

您的javascript问题是，只要用户点击您检查的任何选项，如果仍然选中“所有评级”选项 – 您也会检查所有其他选项（即使您只是取消选中任何选项）。 如果未选中“所有评级”，则取消选中所有其他选项。 因此，事实上只有“所有评级”选项是可点击的。 如果单击任何其他选项，则会立即在onchange处理程序中选中/取消选中它。

试试这段代码：

 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/

Answer 2

试试这个选择全部

 $('#idSelect option').attr("selected","selected"); $('#idSelect').selectpicker('refresh'); 

全部取消选择

 $('#idSelect option').attr("selected",false); $('#idSelect').selectpicker('refresh'); 

对我来说，这很有效。

Answer 3

使用data-actions-box =“true”属性获取全选并取消选择所有选项。 试试这个代码

  All Ratings EC (Early Childhood) E (Everyone) E10+ (Everyone 10+) T (Teen) M (Mature) AO (Adults Only)  

请访问[ https://silviomoreto.github.io/bootstrap-select/options/%5D [1 ]

[1]： https ： //silviomoreto.github.io/bootstrap-select/options/了解更多

希望这有帮助……

Answer 4

 $('.selectpicker option[value=All]').click(function(){ $('.selectpicker option').each(function(){ this.selected = $('.selectpicker option[value=All]').attr('selected'); }); }); 

Answer 5

你可以使用我的function：

首先更改您的代码

 All Ratings 

至

 All Ratings 

第二次添加标签

 $( "#target" ).toggle(function() { selectAll($( "#divRatings" )) }, function() { selectClear($( "#divRatings" )) }); function selectAll(element){//Select All Function element.prop('selected', true); element.selectpicker('refresh'); } function selectClear(element){//Clear All Function element.prop('selected', false); element.selectpicker('refresh'); }