multiselect dropdown with checkbox Examples like jQuery MultiSelect Dropdown With Checkbox, jQuery MultiSelect Dropdown Checkbox With Search, MultiSelect Checkbox Select All and Get Selected Value using $_POST Method in PHP.

multiselect dropdown with checkbox – bootstrap multiselect dropdown checkbox with search

Contents

You can also free download the jQuery MultiSelect Plugin by pasting those bellow links on another tab.

Include jQuery MultiSelect Plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="/multiselect/js/jquery.multiselect.js"></script>
<link href="/multiselect/css/jquery.multiselect.css">

Create a Select Box with HTML

<select name="websiteSelect[]" multiple id="websiteSelect">
    <option value="pakainfo">pakainfo</option>
    <option value="infinityknow">infinityknow</option>
    <option value="w3diy">w3diy</option>
    <option value="w3hub">w3hub</option>
    <option value="w3school">w3school</option>
    <option value="blog">blog</option>
    <option value="Tamilrokers">Tamilrokers</option>
    <option value="Tamilmv">Tamilmv</option>
    <option value="DSP">DSP</option>
    <option value="SEO">SEO</option>
    <option value="Money">Money</option>
    <option value="Code">Code</option>
</select>

Example of Bootstrap – Jquery multiple select with checkboxes using bootstrap-multiselect.js plugin

jQuery MultiSelect Dropdown With Checkbox

jQuery('#websiteSelect').multiselect({
    columns: 1,
    placeholder: 'Select websites',
});

jQuery MultiSelect Dropdown Checkbox With Search

jQuery('#websiteSelect').multiselect({
    columns: 1,
    placeholder: 'Select websites',
    search: true
});

MultiSelect Checkbox Select All

jQuery('#websiteSelect').multiselect({
    columns: 1,
    placeholder: 'Select websites',
    search: true,
    selectAll: true
});

Get Selected Value using $_POST Method in PHP

$_POST['websiteSelect'];

Don’t Miss : Jquery Multiselect Dropdown Checkbox With Search

multiselect dropdown jquery Example

index.html

<html lang="en">  
<head>  
  <title>Jquery multiple select with checkboxes using bootstrap-multiselect.js - www.pakainfo.com</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 Websites:</strong>  
    <select id="multiple-checkboxes" multiple="multiple">  
    <option value="pakainfo">pakainfo</option>
    <option value="infinityknow">infinityknow</option>
    <option value="w3diy">w3diy</option>
    <option value="w3hub">w3hub</option>
    <option value="w3school">w3school</option>
    <option value="blog">blog</option>
    <option value="Tamilrokers">Tamilrokers</option>
    <option value="Tamilmv">Tamilmv</option>
    <option value="DSP">DSP</option>
    <option value="SEO">SEO</option>
    <option value="Money">Money</option>
    <option value="Code">Code</option> 
    </select>  
</div>  
  
<script type="text/javascript">  
    $(document).ready(function() {  
        $('#multiple-checkboxes').multiselect();  
    });  
</script>  
  
</body>  
</html>

I hope you get an idea about multiselect dropdown with checkbox.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.