jQuery Multiselect Checkboxes And Dropdown

September 15, 2017 6:26 pm by ATS Staff

Following codes shows how to implement a set of multiselect checkboxes with a dropdown using jQuery and Bootstrap:

Method: Simple Using jQuery Classes

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
<input type="checkbox" id="check-all">Check All
<hr />
<input type="checkbox" class="check-item">Item 1 <br />
<input type="checkbox" class="check-item">Item 2 <br />
<input type="checkbox" class="check-item">Item 3 <br />
 
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery("#check-all").click(function () {
    	      jQuery('.check-item').prop('checked', this.checked);
	});	
});	
</script>

Method: In A Dropdown

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
       $(document).on('click', '.dropdown-menu', function (e) {
           $(this).hasClass('keep_open') && e.stopPropagation();
       }); 
            
       $(function () {
         $("#checkAll-emailto").click(function () {
            if ($("#checkAll-emailto").is(':checked')) {
               $(".emailto").each(function () {
                  $(this).prop("checked", true);
               });
            } else {
               $(".emailto").each(function () {
                  $(this).prop("checked", false);
               });
            }
         });
      });
   });

   function emailto_values() {
      var emailto = '';
      jQuery('input[type="checkbox"].emailto').each(function(i,obj) {
         if(jQuery("#"+this.id).is(':checked')) {
            emailto += this.value+',';
         }
      });
      emailto = emailto.substr(0,(emailto.length)-1);
      alert(emailto)
   }
  
</script>

<div class="dropdown keep_open" id="emailto-dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="emailto" data-toggle="dropdown" aria-expanded="false">
      <span style="float: left; margin-top: -3px;">Emails <span class="caret"></span></span>
   </button>
   <span class="dropdown-menu cornered_1px keep_open" role="menu" aria-labelledby="emailto" style="margin-top: 0px; margin-left: -1px; width12: 365px;">
      <label>&nbsp;<input id="checkAll-emailto" type="checkbox"> Select All</label><br />
      <div role="presentation" class="divider"></div>
      <label class="keep_open">&nbsp;<input type="checkbox" class="emailto" id="1" value="John Smith <john@smith.com>" > John Smith</label><br />
      <label class="keep_open">&nbsp;<input type="checkbox" class="emailto" id="2" value="John Doe<john@doe.com>" > John Doe</label><br />
   </span>
  <input type="button" onclick="emailto_values(); return false;" value="Show Values" />
</div>

Method: Bootstrap Multiselect Plugin Using Select Tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#lstFruits').multiselect({
            includeSelectAllOption: true
        });
    });

    function showValues() {
        var selected = $("#lstFruits option:selected");
        var message = "";
        selected.each(function () {
            message += $(this).text() + " " + $(this).val() + "\n";
        });
        alert(message);
    }
</script>
<select id="lstFruits" multiple="multiple">
    <option value="1">Mango</option>
    <option value="2">Apple</option>
    <option value="3">Banana</option>
    <option value="4">Guava</option>
    <option value="5">Orange</option>
</select>
<input type="button" onclick="showValues(); return false;" id="btnSelected" value="Get Selected" />

The code uses a bootstrap-multiselect plugin.

The function showValues() builds a comma separated string from the selected values.