twitter-bootstrap Bootstrap-Multiselect：如何使用 JQuery 取消选中和取消选中多选选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39329332/
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
Bootstrap-Multiselect: How to uncheck and deselect Multiselect options using JQuery
提问by user5005768Himadree
I want to write JQuery code that will uncheck and deselect some options from Bootstrap Multi select.
我想编写 JQuery 代码，从 Bootstrap Multi select 中取消选中和取消选择某些选项。
For example if the multi-select is has following values selected & checked:
例如，如果多选是选择并选中以下值：
I want a JQuery that will output the following
我想要一个将输出以下内容的 JQuery
I did the following JQuery which didn't work:
我做了以下无效的 JQuery：
$('#example-optionClass').val('1').prop('checked', flase);
$('#example-optionClass').val('4').prop('checked', flase);
$('#example-optionClass').val('2').prop('checked', true);
$('#example-optionClass').val('6').prop('checked', true);
Here the the Source code:
这里的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
includeSelectAllOption: true, // add select all option as usual
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'odd'; // reversed
}
else {
return 'even'; // reversed
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
#example-optionClass-container .multiselect-all {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>Please help.thanks
请帮忙。谢谢
回答by James
In MultiSelect to select options you need to use
在 MultiSelect 中选择您需要使用的选项
$('#example-optionClass').multiselect('select', ['2', '6']);
This is saying select the options '2' and '6' from example-optionClass.
这就是说从 example-optionClass 中选择选项“2”和“6”。
And to unselect options you need to use
并取消选择您需要使用的选项
$('#example-optionClass').multiselect('deselect', ['1', '4']);
This is saying unselect the options '1' and '4' from example-optionClass
这是说从 example-optionClass 取消选择选项“1”和“4”
If you go to The Methodsyou will see all the JavaScript methods available to you, it explains how to use the 2 above functions in more detail.
如果您转到The Methods，您将看到所有可用的 JavaScript 方法，它更详细地解释了如何使用上述 2 个函数。
Hope this helps
希望这可以帮助
回答by gaetanoM
You can use multiselect methods: select / deselect
您可以使用多选方法：选择/取消选择
The snippet:
片段：
$(document).ready(function() {
$('#example-optionClass').multiselect({
includeSelectAllOption: true, // add select all option as usual
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'odd'; // reversed
}
else {
return 'even'; // reversed
}
}
});
$('#example-optionClass').multiselect('deselect', '1');
$('#example-optionClass').multiselect('deselect', '4');
$('#example-optionClass').multiselect('select', '2');
$('#example-optionClass').multiselect('select', '6');
});#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
#example-optionClass-container .multiselect-all {
background: #eeeeee;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1" checked>Option 1</option>
<option value="2">Option 2</option>
<option value="3" checked>Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>