如果选择第一个选项“全部”,那么我想确保检查所有剩余选项。如果第一个选项“全部”未选中,那么我想确保所有剩余选项均未选中。
它似乎正在选择值,但没有检查前端的选项。
给出的 Codeply 示例:https://www.codeply.com/go/ExFJtHShnF
我编写的 Jquery 代码 - 没有按预期工作
$("#basic").change(function () {
if ( $("#basic option:first").prop('selected') ) {
$('#basic option').prop('selected', true);
}
});
最佳答案
要实现此目的,您需要使用委托(delegate)的 change
事件处理程序,因为下拉列表的内容是动态创建的。
然后您可以根据第一个框的 checked
属性简单地调用 selectAll
或 deselctAll
,如下所示:
$('#basic').multiselect({
templates: {
li: '<li><a href="javascript:void(0);"><label class="pl-2"></label></a></li>'
}
});
$(document).on('change', '.multiselect-container :checkbox:first', function() {
$('#basic').multiselect(this.checked ? 'selectAll' : 'deselectAll').multiselect('refresh');
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<div class="container">
<br /><br />
<select class="custom-select" id="basic" multiple="multiple">
<option value="0">All</option>
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
关于c# - 如果选择第一个选项,jQuery 可以多选所有值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52535395/