ItSolutionStuff.com

Bootstrap Multiple Select with Checkboxes using Bootstrap-multiselect.js JS

By Hardik Savani • November 5, 2023
Bootstrap jQuery

Today, i going to give you example of multiple select dropdown with checkbox that way user can select multiple check boxes using bootstrap-multiselect.js plugin of bootstrap jquery. Bootstrap have a lots of plugin like for datepicker, colorpicker, select with search etc. you can integrate easily with your bootstrap project, even if you are working on code PHP, laravel framework, codeigniter framework, symfony framework or etc other framework of PHP.

bootstrap-multiselect.js provide us also multiple select with search and radio button etc. In this example i did give select drop down box of it languages. you can choose multiple with check box. it is a pretty simple example and you can simply integrate this example in your current application.

So, you can see bellow preview of multi select drop down with check box and also see example code and demo. you can try your own...

Preview:

Example:

<html lang="en">

<head>

<title>Jquery multiple select with checkboxes using bootstrap-multiselect.js</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">

</head>

<body>


<div class="container">

<strong>Select Language:</strong>

<select id="multiple-checkboxes" multiple="multiple">

<option value="php">PHP</option>

<option value="javascript">JavaScript</option>

<option value="java">Java</option>

<option value="sql">SQL</option>

<option value="jquery">Jquery</option>

<option value=".net">.Net</option>

</select>

</div>


<script type="text/javascript">

$(document).ready(function() {

$('#multiple-checkboxes').multiselect();

});

</script>


</body>

</html>

you can get more information about plugin from here : Click Here.

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel 10 Bootstrap Auth Scaffolding Tutorial

Read Now →

Laravel Create Bootstrap Contact US Form Example

Read Now →

JQuery Add Remove Input Fields Dynamically Example

Read Now →

PHP Crop Image Before Upload using Croppie JS Example

Read Now →

Bootstrap Animated Progress Bar using Bootstrap-progressbar JS

Read Now →

Bootstrap Year Picker using Datepicker JS Example

Read Now →

JQuery Chosen Multi Select Dropdown Example

Read Now →

Bootstrap Notification Popup Box using Bootstrap-growl JS Example

Read Now →

JQuery Bootbox Modal Dialog Prompt Example

Read Now →

JQuery Notification Popup Box using Toastr JS Example

Read Now →

JQuery Tag Input Plugin Example Code

Read Now →

Bootstrap Dynamic Autocomplete search using Typeahead JS

Read Now →

Bootstrap Timepicker using Datetimepicker JS Example

Read Now →

Multi Select Autocomplete JQuery Example with Code

Read Now →