Show selected checkbox text in a drop down button

问题

I want to show the selected checkbox's text inside the button, right now when i select something from the checkbox it only shows the text "Multiple Selection ▼"

<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>

回答1:

Here is a multi-display solution for the checkbox value.

In this solution, I used the each() method, which allows access to each input[type=checkbox]. Also, I used the condition to display the text "Multiple Selection ▼" if no values are selected.

$("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>

来源：https://stackoverflow.com/questions/65638654/show-selected-checkbox-text-in-a-drop-down-button

标签

javascript

html

checkbox

bootstrap-4

drop-down-menu