How to create multiple select with checkboxes example using bootstrap-multiselect.js plugin

Today here , i am going to give you an example about multiple select dropdown also with checkbox on that way user can easily select multiple check boxes by using bootstrap-multiselect.js plugin of bootstrap jquery. We know in Bootstrap has a lots of plugin as like as datepicker, colorpicker, select with search etc. We can integrate all easily with our bootstrap project, even if we are working on code PHP, laravel framework, codeigniter framework, symfony framework or etc other framework of PHP then also we can use this.

Here in bootstrap-multiselect.js is provide us also multiple select also with search and radio button etc. Now In this example i will give you select drop down box of also it languages. We can choose the multiple with check box. It is a very pretty and simple example and we can simply integrate by using this example in our current application.

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>

Read Also: How to Show Dynamic Dependent Dropdown in Laravel?

Thanks for read. I hope it help you. For more you can follow us onĀ facebook

close

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →