In this article I will explain with an example, how to implement a Multiple Select (Multi-Select) DropDownList with CheckBoxes in ASP.Net using jQuery Bootstrap Multi-Select Plugin.
ASP.Net ListBox control will be used for building the Bootstrap Multiple Select (Multi-Select) DropDownList with CheckBoxes by making use of Bootstrap and the jQuery Bootstrap Multi-Select Plugin.
 
 
Download Bootstrap and jQuery Bootstrap Multi-Select Plugin
The download locations are as follows.
Bootstrap
 
jQuery BootStrap Multi-Select Plugin
You will need to download the plugin files from the following location.
The complete documentation can be read on the following page.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net ListBox with some ListItem and a Button control.
The Button has been assigned with an OnClick event handler and the ListBox SelectionMode property to Multiple.
Note: It is very important to set the SelectionMode to Multiple otherwise instead of CheckBoxes you will see RadioButtons after the plugin is applied.
 
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Guava" Value="4" />
    <asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
 
 
Applying the jQuery Bootstrap Multi-Select Plugin to the ListBox control
The very first thing you will need to do is to inherit the following JavaScript and CSS files.
1. jQuery JS file.
2. Bootstrap JavaScript and CSS files.
3. jQuery BootStrap Multi-Select Plugin JavaScript and CSS files.
Inside the jQuery document ready event handler, the jQuery Bootstrap Multi-Select Plugin is applied to the ListBox control.
The includeSelectAllOption property is set to True which adds a Select all CheckBox to the ListBox.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=lstFruits]').multiselect({
            includeSelectAllOption: true
        });
    });
</script>
 
 
Fetching the Text and Value of Selected Items on Server Side on Button Click
When the Submit Button is clicked, a loop is executed over the ListBox Items and its Selected property is checked.
If it returns True then a message variable created with ListItem Text and Value property.
Finally, the selected Text and Value are displayed in JavaScript Alert Message Box.
C#
protected void Submit(object sender, EventArgs e)
{
    string message = "";
    foreach (ListItem item in lstFruits.Items)
    {
        if (item.Selected)
        {
            message += item.Text + " " + item.Value + "\\n";
        }
    }
   ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
 
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
    Dim message As String = ""
    For Each item As ListItem In lstFruits.Items
        If item.Selected Then
            message += item.Text + " " + item.Value + "\n"
        End If
    Next
   ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
 
 
Screenshots
ListBox with CheckBox
Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net using jQuery
 
Selected Text and Value in JavaScript Alert Message Box
Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net using jQuery
 
 
Demo
 
 
Downloads