在下拉按钮中显示选定的复选框文本

Question

我想在按钮内显示选中复选框的文本，现在当我从复选框中选择某些内容时，它只显示文本“多选 ▼”

<div class="dropdown show">
                                
    <button style="border-radius: 10px; border-width: 2px; border-color: #fcb141" type="button" class="form-control" data-toggle="dropdown">Multiple Selection ▼</button>
    <ul class="dropdown-menu checkbox-menu allow-focus">

        <li><a style="color: black;" href="#" class="large" data-value="Chinese" tabIndex="-1">
            <input  name="languages[]" value="Chinese" type="checkbox"/>&nbsp;Chinese</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="English" tabIndex="-1">
            <input  name="languages[]" value="English" type="checkbox"/>&nbsp;English</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="French" tabIndex="-1">
            <input  name="languages[]" value="French" type="checkbox"/>&nbsp;French</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="German" tabIndex="-1">
            <input  name="languages[]" value="German" type="checkbox"/>&nbsp;German</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Italian" tabIndex="-1">
            <input  name="languages[]" value="Italian" type="checkbox"/>&nbsp;Italian</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Malay" tabIndex="-1">
            <input  name="languages[]" value="Malay" type="checkbox"/>&nbsp;Malay</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Spanish" tabIndex="-1">
            <input  name="languages[]" value="Spanish" type="checkbox"/>&nbsp;Spanish</a>
        </li>

    </ul>
                                        
</div>

Answer 1

这里是复选框值的多显示解决方案。

在这个解决方案中，我使用了each() 方法，它允许访问每个input[type=checkbox]。另外，如果没有选择任何值，我使用条件显示文本 "Multiple Selection ▼"。

$("ul.dropdown-menu input[type=checkbox]").on('change', function() {
let multi_text = "";
  $("ul.dropdown-menu input[type=checkbox]").each(function() {
    if ($(this).is(":checked")) {
      multi_text += $(this).val() + " ";
    } else {}
    if (multi_text !== '') {
      $(".form-control").text(multi_text);
    } else {
      $(".form-control").text("Multiple Selection ▼"); 
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<div class="dropdown show">

    <button style="border-radius: 10px; border-width: 2px; border-color: #fcb141" type="button" class="form-control" data-toggle="dropdown">Multiple Selection ▼</button>
    <ul class="dropdown-menu checkbox-menu allow-focus">

        <li><a style="color: black;" href="#" class="large" data-value="Chinese" tabIndex="-1">
                <input name="languages[]" value="Chinese" type="checkbox" />&nbsp;Chinese</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="English" tabIndex="-1">
                <input name="languages[]" value="English" type="checkbox" />&nbsp;English</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="French" tabIndex="-1">
                <input name="languages[]" value="French" type="checkbox" />&nbsp;French</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="German" tabIndex="-1">
                <input name="languages[]" value="German" type="checkbox" />&nbsp;German</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Italian" tabIndex="-1">
                <input name="languages[]" value="Italian" type="checkbox" />&nbsp;Italian</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Malay" tabIndex="-1">
                <input name="languages[]" value="Malay" type="checkbox" />&nbsp;Malay</a>
        </li>

        <li><a style="color: black;" href="#" class="large" data-value="Spanish" tabIndex="-1">
                <input name="languages[]" value="Spanish" type="checkbox" />&nbsp;Spanish</a>
        </li>

    </ul>

</div>