How can I show the selected items in the label of a Bootstrap dropdown?

Question

I have a Bootstrap dropdown that has checkboxes in the options. When I select one checkbox, the checkbox text is showing in dropdown button.

The problem is that it is not working the way I want when multiple checkboxes are selected. When I select two checkboxes, the text of the last clicked checkbox is showing. This should not be there, instead of the checkbox text I want it to show "Selected 2 items" in dropdown button.

How can I solve this problem?

$(".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);
  }
});












  
  
    Check All

    
     Checkbox 1
     Checkbox 2
     Checkbox 3

user_514878 · Answer

You can actually do it very easily in the code you have already - you just need to check the number of selected options before you set the label:

This line will get the number of selected checkboxes:

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

Now all you need to do is check if it is > 1, and set the button to:

selText = numSelected + " selected";

That's it! (Don't forget that you also need to check if the current checkbox was deselected - you're not currently doing that).

Show "All selected" label:

If you want to get fancy, you can also see if all of the checkboxes are selected and display "all selected" instead, or if 1 is selected then show the label of that one.

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);
});

Working Example:

// 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);
  }

});












  
  
    Check All

    
     Checkbox 1
     Checkbox 2
     Checkbox 3

user_13368658 · Answer

Try this instead,

First of all add label with for attribute to click event in label to check the box. like this

  
    
    Check All

Then check how many checked the dropdown item. By

var len = $('.dropdown-menu .dropdown-item input:checked').length;

if the checkall button clicked then by

if($('#checkall:checked').length){
  len= "3";
}

Finally add to dropdown button

 $(this).parents('.btn-group').find('.dropdown-toggle').html("Selected "+len+" item");

$(".btn-group .btn.btn-secondary").click(function(){

  $('.dropdown-menu .dropdown-item input').change(function () {
    var len=$('.dropdown-menu .dropdown-item input:checked').length;
    // to get number of checked checkbox

    if($('#checkall:checked').length | len == 3){
      len= "All"; // if checked all check box to value to '3'
    }

    $(this).parents('.btn-group').find('.dropdown-toggle').html("Selected "+len+" item");
    // to assign value to dropdown button
  });
  
});

// for checkall 
$('#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);
 }
});

user_9131891 · Answer

You can try this I have made some modifications

$(".dropdown-menu a").click(function() {
  var selText = $(this).text();

  $(this).parents('.btn-group').find('.dropdown-toggle').html("selected " + $('.cb-element:checked').length + " item");
});

// checbox
$('#checkall').change(function() {
  var dropDown = $(this).parents('.btn-group').find('.dropdown-toggle');
  $('.cb-element').prop('checked', this.checked);
  if (!$('.cb-element:checked').length)
    dropDown.html("Dropdown button");
  else
    dropDown.html("selected " + $('.cb-element:checked').length + " item");
});

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











  
  
    Check All

    
     Checkbox 1
     Checkbox 2
     Checkbox 3

user_125981 · Answer

I find this checkbox/check all pattern interesting in that you should handle the click of the 'all' and the normal and set the values. This is also interesting as it is in a "drop down" visual so you have to keep that open for a better user experience when they are making selections. In addition you have "custom" labels for the drop down menu dependent upon what is checked. All an interesting behavior complex.

I don't like using global variables that might be a possible duplicate of other code and prefer to keep things in a namespace - not a fancy one and not an instance one here but still of use for those reasons.

I give an example of using a "label" element for the text of the drop down but also a "data" property to hold one so we have multiple options demonstrated.

Comments in-line to help with what it is doing.

Note that I use CSS instead of an in-line for the spacing which also allows me to style it a bit (green underline) and choose how much margin to add to the "check all"

// namespace to avoid globals
var myApp = myApp || {
  checkBoxes: {},
  originalText: "",
  toggleText: "Checked ",
  handleCheckboxEvents: function(event) {
    // keep event from bubble to 'a' tag
    event.stopImmediatePropagation()
    let checkedOnes = myApp.checkBoxes.filter(':checked');
    let checkCount = checkedOnes.length;
    let checkedAll = checkCount === myApp.checkBoxes.length;
    // use if single checked for label
    let label = checkedOnes.first()
      .closest('.dropdown-item')
      .find('.check-label').html();
    // labels can come from data also like this example
    let checkallLabel = $('.checkall-item').data('all');

    // non checked use original
    let selText = checkCount === 0 ?
      myApp.originalText :
      // one checked use its label
      checkCount === 1 ? label :
      // checked all? 
      checkedAll ? checkallLabel :
      // more than one - use number checked
      myApp.toggleText + checkCount;
    // set the text we determined
    $(this).closest('.btn-group')
      .find('.dropdown-toggle')
      .html(selText);
    $('#checkall').trigger('set-checkall', [{
      source: 'checkbox'
    }]);
  },
  handleLinkClick: function(event) {
    // keep link from being followed
    event.preventDefault();
    // keep dropdown menu from closing
    event.stopPropagation();
    let cb = $(this).find('input[type="checkbox"]');
    let isChecked = cb.prop("checked");
    cb.prop("checked", !isChecked);
    cb.trigger('change');
  },
  handleCheckAll: function(event, data) {
    // use the source of the event to set it
    if (data.source == 'checkall') {
      // toggle to what it is not
      $(this).prop('checked', !this.checked);
      $('.cb-element').prop('checked', this.checked).trigger('change');
    }
    if (data.source === 'checkbox') {
      // set depending on how many checked
      $(this).prop('checked', myApp.checkBoxes.filter(':checked').length == myApp.checkBoxes.length);
    }
  },
  // initialize and attach event handlers
  init: function() {
    this.checkBoxes = $('.cb-element');
    this.originalText = $('.btn-secondary.dropdown-toggle').html();
    // handle the checkbox click or change
    $(".dropdown-menu").find('a.dropdown-item')
      .on('click change', 'input[type="checkbox"]', this.handleCheckboxEvents);
    $(".dropdown-menu").find('a.dropdown-item')
      .on('click', this.handleLinkClick);
    // handle the checkall change by its wrapper click
    $('.checkall-item').on('click', function() {
      event.stopPropagation();
      $('#checkall').trigger('set-checkall', [{
        source: 'checkall'
      }]);
    });
    // use custom event so we can use multiple places, passing it data
    $('#checkall').on('set-checkall', this.handleCheckAll);
  }
};
myApp.init();

.checkall-item .check-label {
  margin-bottom: 1em;
  border-bottom: 1px green solid;
  display: inline-block;
  font-weight:bold;
}







  
  
    Check All
    Checkbox Fun
    Checkbox Happy
    Checkbox Now

How can I show the selected items in the label of a Bootstrap dropdown?

4 Answers