jQuery 在 Bootstrap Select 插件中全选/取消全选
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28111340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select all / Unselect all in Bootstrap Select plugin
提问by demo
<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>
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.
在上面的 html 中有 value 的选项All。如果选择了该选项，我想选择所有项目，如果我取消选择此选项，则取消选择所有项目。
I think it will be simple to do, but i can't get why nothing happens on $('#divRatings').change(function(){//some logic});
我认为这很容易做到，但我不明白为什么什么都没有发生 $('#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');
}
}
采纳答案by glyuck
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 onchangehandler.
您的 javascript 的问题在于，无论何时用户单击您选中的任何选项，如果“所有评级”选项仍处于选中状态 - 您也会选中所有其他选项（即使您只是取消选中任何选项）。如果未选中“所有评级”，则取消选中所有其他选项。因此，实际上只有“所有评级”选项是可点击的。如果您单击任何其他选项，它会立即在您的onchange处理程序中选中/取消选中。
Try this code:
试试这个代码：
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/bu5vjdk6/4/
Updated code
http://jsfiddle.net/surajkm33/tsomyckj/
回答by Gleny
Try this select All
试试这个全选
$('#idSelect option').attr("selected","selected");
$('#idSelect').selectpicker('refresh');
Unselect All
全部取消选择
$('#idSelect option').attr("selected",false);
$('#idSelect').selectpicker('refresh');
for my, this worked.
对我来说，这奏效了。
回答by M. K Hossain
Use data-actions-box="true" attribute to get select all and deselect all option. Try this code
使用 data-actions-box="true" 属性来获取全选和取消全选选项。试试这个代码
<select id="divRatings" class="selectpicker" multiple title='Choose one of the following...' data-size="5" data-selected-text-format="count>2" data-actions-box="true">
<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>
Please visit [https://silviomoreto.github.io/bootstrap-select/options/][1]
请访问 [ https://silviomoreto.github.io/bootstrap-select/options/][1]
[1]: https://silviomoreto.github.io/bootstrap-select/options/To Know more
[1]：https: //silviomoreto.github.io/bootstrap-select/options/了解更多
Hope this help...
希望这有助于...
回答by Paulo Segundo
$('.selectpicker option[value=All]').click(function(){
$('.selectpicker option').each(function(){
this.selected = $('.selectpicker option[value=All]').attr('selected');
});
});
回答by Ferhat KO?ER
You can use my functions :
您可以使用我的功能：
firstchange your code
首先更改您的代码
<option value="All" selected="selected">All Ratings</option>
to
到
<option value="All" id="target" selected="selected">All Ratings</option>
and secondadd between your <script>tags
然后在您的标签之间添加第二个<script>
$( "#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');
}
回答by D4V1D
I came accross this question while seeking for a quick solution to toggle on/off all option in a selectpicker<select>and I ended up drafting my own, one-liner style, that works for both on and off states:
我在寻求一种快速解决方案以在 a 中打开/关闭所有选项时遇到了这个问题，selectpicker<select>最终我起草了自己的单行样式，适用于打开和关闭状态：
So for a given select#my-select:
所以对于给定的select#my-select：
HTML
HTML
<div>
<input type="checkbox" id="select_all" data-id-select="my-select">
<label for="select_all">Toggle all</label>
</div>
JS/jQuery
JS/jQuery
$('#select_all').on('click', function() {
$('#' + $(this).data('id-select')).find('option').prop('selected', $(this).is(':checked')).parent('select').selectpicker('refresh');
});
回答by Terry
I started with @glyuck answer but changed it a little bit. I didn't want the 'All' item to be selected and then have the bootstrap-select show 'N items selected' in which one of them was the 'All' item. So basically, for me, that item will 'never select', it is more or less just a 'button' to toggle the states.
我从@glyuck 的答案开始，但稍微改变了它。我不希望选择“全部”项目，然后让引导选择显示“选择 N 个项目”，其中一个是“全部”项目。所以基本上，对我来说，那个项目将“永远不会选择”，它或多或少只是一个切换状态的“按钮”。
My markup would look like this:
我的标记如下所示：
<select size="4" multiple="multiple" class="form-control selectpicker show-tick select-all" data-selected-text-format="count > 2">
<option value="[all]" class="select-all">All Items</option>
<option value="" data-divider="true"></option>
<option value="0">Members Selected</option>
<option value="1">Separated Members Selected</option>
<option value="2">Request Approval</option>
<option value="3">Approved</option>
<option value="4">Rejected</option>
</select>
Then the code to make it work the way I wanted was:
然后让它按照我想要的方式工作的代码是：
$('.selectpicker.select-all').on('change', function () {
var selectPicker = $(this);
var selectAllOption = selectPicker.find('option.select-all');
var checkedAll = selectAllOption.prop('selected');
var optionValues = selectPicker.find('option[value!="[all]"][data-divider!="true"]');
if (checkedAll) {
// Process 'all/none' checking
var allChecked = selectAllOption.data("all") || false;
if (!allChecked) {
optionValues.prop('selected', true).parent().selectpicker('refresh');
selectAllOption.data("all", true);
}
else {
optionValues.prop('selected', false).parent().selectpicker('refresh');
selectAllOption.data("all", false);
}
selectAllOption.prop('selected', false).parent().selectpicker('refresh');
}
else {
// Clicked another item, determine if all selected
var allSelected = optionValues.filter(":selected").length == optionValues.length;
selectAllOption.data("all", allSelected);
}
}).trigger('change');
Thanks @glyuck for the inspiration.
感谢@glyuck 的灵感。
Fiddle: http://jsfiddle.net/3Lr4jsz0/
回答by Samuel Bié
It has been answered but i found a better way of doing.
它已得到回答，但我找到了更好的方法。
Just add data-actions-box="true"as attributes of the selecttag.
只需添加data-actions-box="true"作为选择标签的属性。
Eg.
例如。
<label>Select/deselect all</label>
<select class="selectpicker form-control" data-style="btn-outline-warning" multiple data-actions-box="true">
<optgroup label="Condiments">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select>
