在 bootstrap-multiselect 中显示全选复选框并自定义“未选择”文本答案

【问题标题】：Showing select all checkbox in bootstrap-multiselect and customize the "None Selected" Text在 bootstrap-multiselect 中显示全选复选框并自定义“未选择”文本
【发布时间】：2017-05-08 06:09:02
【问题描述】：

我正在寻找一种解决方案，将无选定标签更改为自己的文本。

我有这个代码， html:

<select id="mySelect" multiple="multiple">          
    <optgroup label="MODERN" value="MODERN">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>
<select id="mySelect2" multiple="multiple">         
    <optgroup label="TREND" value="TREND">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>

js:

$(function () {
    $('#mySelect').multiselect({
        enableClickableOptGroups: true
    });
    $('#mySelect2').multiselect({
        enableClickableOptGroups: true
    });
});

我想将“未选择”文本设置为 MODERN，同时，我希望将全选选项包含在复选框中。

谁能给我一些关于如何做到这一点的想法？

【问题讨论】：

I want the select all option to be included in the checkbox.?复选框从何而来？

标签： jquery html checkbox multi-select bootstrap-multiselect

【解决方案1】：

您好，如果您想选中此控件的所有复选框，则可以使用以下代码。您可以使用 nonSelectedText 属性来更改“未选择”文本

$(function () {
$('#mySelect').multiselect({
    enableClickableOptGroups: true,
    includeSelectAllOption:true,
    nonSelectedText: 'MODERN'
});
$('#mySelect2').multiselect({
    enableClickableOptGroups: true
    includeSelectAllOption:true
});

});

【讨论】：

这解决了我的问题。我添加了 includeSelectAllOption:true, nonSelectedText: 并删除了 Optgroups。
很高兴知道它解决了您的问题。但请更好地重新表述您的问题，以便其他人也可以从该线程中受益。例如，您没有提到您使用的是哪个插件。也许你也可以编辑标题。

【解决方案2】：

在您的 HTML 中

<select id="mySelect" multiple="multiple">          
    <optgroup label="MODERN" value="MODERN" stat="0">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>
<select id="mySelect2" multiple="multiple">         
    <optgroup label="TREND" value="TREND" stat="0">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>

在你的 JS 中

$(document).on('click','optgroup',function()
{
    if($(this).attr('stat') == "0")
    {
        $(this).children().attr("selected", "selected");
        $(this).attr('stat', "1");
    }
    else
    {
        $(this).children().attr("selected", false);
        $(this).attr('stat', "0");
    }
});

【讨论】：