html - 如何在 Bootstrap 下拉菜单的标签中显示所选元素？

Question

我有一个 Bootstrap 下拉菜单，在选项中有复选框。当我选择一个复选框时，复选框文本显示在下拉按钮中。

The problem is that it is not working the way I want when multiple checkboxes are selected.当我选择两个复选框时，会显示上次单击的复选框的文本。这不应该在那里，而不是我希望它在下拉按钮中显示“选定的 2 个元素”的复选框文本。

我该如何解决这个问题？

$(".dropdown-menu a").click(function() {
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
});

// checbox
$('#checkall').change(function() {
  $('.cb-element').prop('checked', this.checked);
});

$('.cb-element').change(function() {
  if ($('.cb-element:checked').length == $('.cb-element').length) {
    $('#checkall').prop('checked', true);
  } else {
    $('#checkall').prop('checked', false);
  }
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="btn-group ">

  <button class="btn btn-secondary dropdown-toggle text-center" type="button" data-toggle="dropdown">
                    Dropdown button
                  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item"><input type="checkbox" name="all" class="mr-2" id="checkall">Check All</br>
    </a>
    <a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 1</a>
    <a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 2</a>
    <a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 3</a>
  </div>

</div>

Answer 1

实际上您可以在已有的代码中非常轻松地做到这一点 - 您只需要在设置标签之前检查所选选项的数量:

1. 此行将获取选中复选框的数量:

numSelected = $(this).parent(".dropdown-menu").find('.cb-element:checked').length;

1. 现在您需要做的就是检查它是否为 > 1，然后将按钮设置为:

selText = numSelected + " selected";

就是这样! (不要忘记，您还需要检查当前复选框是否被取消选择 - 您目前没有这样做)。

显示“全部选中”标签:

如果你想花哨一些，你还可以查看是否所有复选框都被选中并显示“全部选中”，或者如果 1 个被选中则显示该复选框的标签。

totalNumOptions = $(".dropdown-menu .cb-element").length;

$(".dropdown-menu a").change(function() {

  // get selected options
  selected = $(this).parent(".dropdown-menu").find('.cb-element:checked');

  if (selected.length == totalNumOptions || $("input#checkall:checked").length == 1)
    // ALL options are selected, of "All checked" is checked
    selText = "All selected";
 
  else if (selected.length == 1) 
    // show text of the SELECTED option (NOTE: not clicked option!)
    selText = $(selected[0]).parent().text();  

  else
   // show number of selected options
    selText = selected.length + " selected";

  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
});

工作示例:

// Get the total number of options so we can see if all are checked
// do this outside of handler so we only do it once
var totalNumOptions = $(".dropdown-menu .cb-element").length;

$(".dropdown-menu a").change(function() {

  // get number of selected options
  selected = $(this).parent(".dropdown-menu").find('.cb-element:checked');

  if (selected.length == totalNumOptions ||
    $(this).find("input#checkall:checked").length == 1)
    // ALL options are selected
    selText = "All selected";

  else if (selected.length == 1)
    //only 1 selected so show the selected option
    selText = $(selected[0]).parent().text();

  else
    // show number of selected options
    selText = selected.length + " selected";

  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
});

// checbox
$('#checkall').change(function() {
  $('.cb-element').prop('checked', this.checked);
});

$('.cb-element').change(function() {
  if ($('.cb-element:checked').length == $('.cb-element').length) {
    $('#checkall').prop('checked', true);
  } else {
    $('#checkall').prop('checked', false);
  }

});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="btn-group ">

  <button class="btn btn-secondary dropdown-toggle text-center" type="button" data-toggle="dropdown">
                    Dropdown button
                  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item"><input type="checkbox" name="all" class="mr-2" id="checkall">Check All</br>
    </a>
    <a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 1</a>
    <a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 2</a>
    <a class="dropdown-item"><input type="checkbox" class="cb-element mr-2"> Checkbox 3</a>
  </div>

</div>