bootstrap-multiselect 全选全部勾选选中,取消全部勾选取消

multiselect 下载使用:

链接:https://pan.baidu.com/s/18_yo3OGqR-FTUQ7ML3K97g  密码:auut

<link rel="stylesheet" type="text/css" href="bootstrap-multiselect.css">

<script type="text/javascript" src="bootstrap-multiselect.js"></script>
直接使用
    <div>
       <select multiple="multiple">
           <option>上海</option>
           <option>江苏</option>
           <option>山东</option>
           <option>广西</option>
       </select>
   </div>
 
<script>
$("#multiselect_select").multiselect({
buttonWidth:195, //选择框的大小
includeSelectAllOption: true,//是否现实全选
nonSelectedText: '省份/城市',
selectAllText: '全部',
allSelectedText: '全部',
selectAllValue: '全部',
includeSelectAllOption: true,
});
</script>

这时候全选

按需求上海,江苏等城市全部选上

分析:

buttonText: function(options, select) {
if (this.disabledText.length > 0
&& (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) {

return this.disabledText;
}
else if (options.length === 0) {
$('.checker span').removeClass('checked') //添加全部取消
return this.nonSelectedText;
}
else if (this.allSelectedText
&& options.length === $('option', $(select)).length
&& $('option', $(select)).length !== 1
&& this.multiple) {

if (this.selectAllNumber) {
var selected = '';
options.each(function() {
$('.checker span').addClass('checked')
}); //全部选中
return this.allSelectedText + ' (' + options.length + ')';
}
else {
return this.allSelectedText;
}
}
else if (this.numberDisplayed != 0 && options.length > this.numberDisplayed) {
return options.length + ' ' + this.nSelectedText;
}
else {
var selected = '';
var delimiter = this.delimiterText;

options.each(function() {
var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
selected += label + delimiter;
});

return selected.substr(0, selected.length - this.delimiterText.length);
}
}
如上可实现,如有其它效果请加群讨论
原文地址:https://www.cnblogs.com/chaihy/p/11192897.html