{"id":1531,"date":"2016-05-16T17:25:06","date_gmt":"2016-05-16T17:25:06","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1531"},"modified":"2023-08-04T07:02:02","modified_gmt":"2023-08-04T07:02:02","slug":"multi-select-dropdown-list-with-checkbox-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/","title":{"rendered":"Multi-select Dropdown List with Checkbox using jQuery"},"content":{"rendered":"

Multiselect dropdown<\/b> is very useful to allow the user to select multiple options in a selectbox. Multiple selections of the dropdown list can be added by using multiple attribute in the <select<\/span>><\/span> tag. But in this case, multiple options can be selected by holding down the control (ctrl) button of the keyboard. Instead of using the multiple<\/code> attributes in HTML, you can use jQuery to make the multi-select dropdown more user-friendly and add the checkbox to each option in the multi-select dropdown.<\/p>\n

jQuery MultiSelect<\/b> is a jquery plugin that turns a multiselect list into a nice and easy-to-use dropdown list with checkboxes. This plugin is the easiest way to change the interface of native select box elements and create multi select box with the checkbox. In this tutorial, we will show you how to convert HTML multi-select drop-down and integrate multiple select or multi-select dropdown list with checkbox<\/b> using jQuery.<\/p>\n

jQuery MultiSelect Plugin<\/h2>\n

We will use the MultiSelect Plugin to implement multiselect dropdown with checkbox<\/b> in jQuery. In order to implement a multi-select dropdown list with checkboxes, you need to include the plugin library files.<\/p>\n

Include the jQuery library and the JS & CSS library of the jQuery MultiSelect plugin<\/b>.<\/p>\n

<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.0\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- JS & CSS library of MultiSelect plugin --><\/span>\r\n<script<\/span> src<\/span>=\"js\/multiselect\/jquery.multiselect.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"js\/multiselect\/jquery.multiselect.css\"<\/span>><\/span><\/pre>\n
Create Dropdown List \/ Select Box with HTML<\/h2>\n
The <select<\/span>><\/span> element creates a drop-down list and <option<\/span>><\/span> tags define the available options in this list. The multiple<\/b> attribute allow selecting multiple options in the select box.<\/p>\n
<select<\/span> name<\/span>=\"langOpt[]\"<\/span> multiple<\/span> id<\/span>=\"langOpt\"<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"C++\"<\/span>><\/span>C++<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"C#\"<\/span>><\/span>C#<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"Java\"<\/span>><\/span>Java<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"Objective-C\"<\/span>><\/span>Objective-C<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"JavaScript\"<\/span>><\/span>JavaScript<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"Perl\"<\/span>><\/span>Perl<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"PHP\"<\/span>><\/span>PHP<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"Ruby on Rails\"<\/span>><\/span>Ruby on Rails<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"Android\"<\/span>><\/span>Android<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"iOS\"<\/span>><\/span>iOS<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"HTML\"<\/span>><\/span>HTML<\/option<\/span>><\/span>\r\n    <option<\/span> value<\/span>=\"XML\"<\/span>><\/span>XML<\/option<\/span>><\/span>\r\n<\/select<\/span>><\/span><\/pre>\n
Add Checkboxes to Multi-select Drop-down List<\/h2>\n
Call the multiselect()<\/code> method to initialize MultiSelect plugin.<\/p>\n
$('select[multiple]'<\/span>).multiselect();<\/pre>\n
jQuery MultiSelect plugin provides various options to customize and enhance the multi-select dropdown functionality. Some mostly used multi-select dropdown example code snippets are given below.<\/p>\n
jQuery MultiSelect with Checkboxes:<\/b>
\nThe following code adds checkboxes to options in multiselect dropdown with single column list.<\/p>\n
$('#langOpt'<\/span>).multiselect({\r\n    columns: 1<\/span>,\r\n\ttexts: {\r\n        placeholder: 'Select Languages'<\/span>\r\n    }\r\n});<\/pre>\n
jQuery MultiSelect With Search Option:<\/b>
\nThe following code enables the search\/filtering on options in multiselect dropdown.<\/p>\n
$('#langOpt'<\/span>).multiselect({\r\n    columns: 1<\/span>,\r\n    texts: {\r\n        placeholder: 'Select Languages'<\/span>,\r\n        search     : 'Search Languages'<\/span>\r\n    },\r\n    search: true<\/span>\r\n});<\/pre>\n
jQuery MultiSelect With Select All Option:<\/b>
\nThe following code adds select all text to options list in multiselect dropdown. It allows to check\/uncheck all options at once.<\/p>\n
$('#langOpt'<\/span>).multiselect({\r\n    columns: 1<\/span>,\r\n    texts: {\r\n        placeholder: 'Select Languages'<\/span>,\r\n        search     : 'Search Languages'<\/span>\r\n    },\r\n    search: true<\/span>,\r\n    selectAll: true<\/span>\r\n});<\/pre>\n
jQuery MultiSelect With Optgroup:<\/b>
\nThe following code adds checkboxes to options group (<optgroup<\/span>><\/span>) in multiselect dropdown with 3 columns list.<\/p>\n
$('#langOptgroup'<\/span>).multiselect({\r\n    columns: 3<\/span>,\r\n    texts: {\r\n        placeholder: 'Select Languages'<\/span>,\r\n        search     : 'Search Languages'<\/span>\r\n    },\r\n    search: true<\/span>,\r\n    selectAll: true<\/span>\r\n});<\/pre>\n
jQuery MultiSelect With Maximum Limit of Selected Options:<\/b>
\nThe following code snippet shows how can you add a maximum selection limit restriction in multiselect dropdown.<\/p>\n
$('#langOpt'<\/span>).multiselect({\r\n    columns: 3<\/span>,\r\n    texts: {\r\n        placeholder: 'Select Languages (max 3)'<\/span>,\r\n        search     : 'Search Languages'<\/span>\r\n    },\r\n    search: true<\/span>,\r\n    onOptionClick: function<\/span>( element, option <\/span>) <\/span>{\r\n        var<\/span> maxSelect = 3<\/span>;\r\n\r\n        \/\/ too many selected, deselect this option<\/span>\r\n        if<\/span>( $(element).val().length > maxSelect ) {\r\n            if<\/span>( $(option).is(':checked'<\/span>) ) {\r\n                var<\/span> thisVals = $(element).val();\r\n\r\n                thisVals.splice(\r\n                    thisVals.indexOf( $(option).val() ), 1<\/span>\r\n                );\r\n\r\n                $(element).val( thisVals );\r\n\r\n                $(option).prop( 'checked'<\/span>, false<\/span> ).closest('li'<\/span>)\r\n                    .toggleClass('selected'<\/span>);\r\n            }\r\n        }\r\n        \/\/ max select reached, disable non-checked checkboxes<\/span>\r\n        else<\/span> if<\/span>( $(element).val().length == maxSelect ) {\r\n            $(element).next('.ms-options-wrap'<\/span>)\r\n                .find('li:not(.selected)'<\/span>).addClass('disabled'<\/span>)\r\n                .find('input[type=\"checkbox\"]'<\/span>)\r\n                    .attr( 'disabled'<\/span>, 'disabled'<\/span> );\r\n        }\r\n        \/\/ max select not reached, make sure any disabled<\/span>\r\n        \/\/ checkboxes are available<\/span>\r\n        else<\/span> {\r\n            $(element).next('.ms-options-wrap'<\/span>)\r\n                .find('li.disabled'<\/span>).removeClass('disabled'<\/span>)\r\n                .find('input[type=\"checkbox\"]'<\/span>)\r\n                    .removeAttr( 'disabled'<\/span> );\r\n        }\r\n    }\r\n});<\/pre>\n
Load Options Dynamically in Multiselect Dropdown:<\/b>
\nYou can load the multi-select dropdown options dynamically using the loadOptions<\/code> method.<\/p>\n
$('#langOpt'<\/span>).multiselect( 'loadOptions'<\/span>, [{\r\n    name   : 'Option Name 1'<\/span>,\r\n    value  : 'option-value-1'<\/span>,\r\n    checked: false<\/span>,\r\n    attributes : {\r\n        custom1: 'value1'<\/span>,\r\n        custom2: 'value2'<\/span>\r\n    }\r\n},{\r\n    name   : 'Option Name 2'<\/span>,\r\n    value  : 'option-value-2'<\/span>,\r\n    checked: false<\/span>,\r\n    attributes : {\r\n        custom1: 'value1'<\/span>,\r\n        custom2: 'value2'<\/span>\r\n    }\r\n},{\r\n    name   : 'Option Name 3'<\/span>,\r\n    value  : 'option-value-3'<\/span>,\r\n    checked: false<\/span>,\r\n    attributes : {\r\n        custom1: 'value1'<\/span>,\r\n        custom2: 'value2'<\/span>\r\n    }\r\n}]);<\/pre>\n
Reload Multiselect Dropdown:<\/b>
\nUse the reload<\/code> method to reload multiselect dropdown in case the options are modified after the plugin initialization.<\/p>\n
$('#langOpt'<\/span>).multiselect('reload'<\/span>);<\/pre>\n
Get Selected Options Value using PHP<\/h2>\n
When the multiple checkboxes value is submitted via an HTML form, you can retrieve the selected options value through normal GET or POST methods. The following code shows how you can get multiple selected values of the select box using the $_POST method in PHP<\/b>.<\/p>\n
HTML Code:<\/b><\/p>\n
<form<\/span> method<\/span>=\"post\"<\/span>><\/span>\r\n    <!-- Multi-select dropdown --><\/span>\r\n    <select<\/span> name<\/span>=\"langOpt[]\"<\/span> multiple<\/span> id<\/span>=\"langOpt\"<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"C++\"<\/span>><\/span>C++<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"C#\"<\/span>><\/span>C#<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"Java\"<\/span>><\/span>Java<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"Objective-C\"<\/span>><\/span>Objective-C<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"JavaScript\"<\/span>><\/span>JavaScript<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"Perl\"<\/span>><\/span>Perl<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"PHP\"<\/span>><\/span>PHP<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"Ruby on Rails\"<\/span>><\/span>Ruby on Rails<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"Android\"<\/span>><\/span>Android<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"iOS\"<\/span>><\/span>iOS<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"HTML\"<\/span>><\/span>HTML<\/option<\/span>><\/span>\r\n        <option<\/span> value<\/span>=\"XML\"<\/span>><\/span>XML<\/option<\/span>><\/span>\r\n    <\/select<\/span>><\/span>\r\n\r\n    <!-- Submit button --><\/span>\r\n    <input<\/span> type<\/span>=\"submit\"<\/span> name<\/span>=\"submit\"<\/span> value<\/span>=\"Submit\"<\/span>><\/span>\r\n<\/form<\/span>><\/span><\/pre>\n
JavaScript Code:<\/b><\/p>\n
<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- JS & CSS library of MultiSelect plugin --><\/span>\r\n<script<\/span> src<\/span>=\"js\/multiselect\/jquery.multiselect.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"js\/multiselect\/jquery.multiselect.css\"<\/span>><\/span>\r\n\r\n<script<\/span>><\/span>\r\n$('#langOpt'<\/span>).multiselect();<\/pre>\n
<\/script<\/span>><\/span><\/p>\n
PHP Code:<\/b>
\nUse $_POST<\/code> method to get the selected option values in an array format using PHP.<\/p>\n
<?php 
 
<\/span>if(isset(<\/span>$_POST<\/span>[<\/span>'submit'<\/span>])){ 
    <\/span>\/\/ Get the selected options 
    <\/span>$selectedOptions_arr <\/span>= <\/span>$_POST<\/span>[<\/span>'langOptgroup'<\/span>]; 
     
    <\/span>\/\/ Render selected options array 
    <\/span>print_r<\/span>(<\/span>$selectedOptions_arr<\/span>); 
} 
 
<\/span>?><\/span><\/pre>\n
<\/span>Dynamic Dependent Select Box using jQuery, Ajax and PHP<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
Multiselect dropdown is very useful to allow the user to select multiple options in a selectbox. Multiple selections of the dropdown list can be added by using multiple attribute in the <select> tag. But in <\/p>\n","protected":false},"author":1,"featured_media":5430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[81,16,182,299,82],"class_list":["post-1531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-dropdown","tag-jquery","tag-multi-select","tag-plugin","tag-selectbox","cat-6-id","has_thumb"],"yoast_head":"\nMulti-select Dropdown List with Checkbox using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"jQuery Multiselect Dropdown with Checkbox - Create multiple select or multi-select dropdown list with checkbox using jQuery and get the selected options using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi-select Dropdown List with Checkbox using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"jQuery Multiselect Dropdown with Checkbox - Create multiple select or multi-select dropdown list with checkbox using jQuery and get the selected options using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-16T17:25:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-04T07:02:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Multi-select Dropdown List with Checkbox using jQuery\",\"datePublished\":\"2016-05-16T17:25:06+00:00\",\"dateModified\":\"2023-08-04T07:02:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/\"},\"wordCount\":513,\"commentCount\":21,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png\",\"keywords\":[\"Dropdown\",\"jQuery\",\"Multi-Select\",\"Plugin\",\"SelectBox\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/\",\"name\":\"Multi-select Dropdown List with Checkbox using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png\",\"datePublished\":\"2016-05-16T17:25:06+00:00\",\"dateModified\":\"2023-08-04T07:02:02+00:00\",\"description\":\"jQuery Multiselect Dropdown with Checkbox - Create multiple select or multi-select dropdown list with checkbox using jQuery and get the selected options using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/05\\\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/multi-select-dropdown-list-with-checkbox-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Multi-select Dropdown List with Checkbox using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Multi-select Dropdown List with Checkbox using jQuery - CodexWorld","description":"jQuery Multiselect Dropdown with Checkbox - Create multiple select or multi-select dropdown list with checkbox using jQuery and get the selected options using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Multi-select Dropdown List with Checkbox using jQuery - CodexWorld","og_description":"jQuery Multiselect Dropdown with Checkbox - Create multiple select or multi-select dropdown list with checkbox using jQuery and get the selected options using PHP.","og_url":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-05-16T17:25:06+00:00","article_modified_time":"2023-08-04T07:02:02+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Multi-select Dropdown List with Checkbox using jQuery","datePublished":"2016-05-16T17:25:06+00:00","dateModified":"2023-08-04T07:02:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/"},"wordCount":513,"commentCount":21,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png","keywords":["Dropdown","jQuery","Multi-Select","Plugin","SelectBox"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/","url":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/","name":"Multi-select Dropdown List with Checkbox using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png","datePublished":"2016-05-16T17:25:06+00:00","dateModified":"2023-08-04T07:02:02+00:00","description":"jQuery Multiselect Dropdown with Checkbox - Create multiple select or multi-select dropdown list with checkbox using jQuery and get the selected options using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png","width":1920,"height":1080,"caption":"multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/multi-select-dropdown-list-with-checkbox-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Multi-select Dropdown List with Checkbox using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/05\/multi-select-dropdown-list-select-box-with-checkbox-using-jquery-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-oH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":14,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1531\/revisions"}],"predecessor-version":[{"id":5429,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1531\/revisions\/5429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5430"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}