Convert Selected Item Into Checkboxes jQuery Plugin Radio Buttons

jQuery Custom Select is a small plug-in for converting multiple selects/multi-selects into radio/checkbox input menus with change and monitor events for dynamically added coding.

how to use checkbox inside select option in html, multiselect dropdown with checkbox, multiselect dropdown with checkbox in html5, how to select multiple radio buttons in html


  • Converts any normal selection into a radio input menu
  • Converts any multiple selections into a list of checkbox entries
  • Added dropdown menu function
  • Add inline search too long lists
  • Monitor tags added dynamically, to quickly link

How to make use of it:

1. Include the jQuery SelectToCheckbox’s information after loading the newest jQuery library and Bootstrap’s stylesheet.

<!-- Dependency -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Load the plugin bundle. -->
<link rel="stylesheet" href="select_to_checkbox.css" />
<script src="select-to-checkbox-bundle.min.js"></script>

2. Convert a SINGLE choose field into a listing of radio buttons.

<select name="animals" id="example">
  <option value="bear">Bear</option>
  <option value="ant">Ant</option>
  <option value="salamander">Salamander</option>
  <option value="owl" label="Custom Display Text">Owl</option>
  <option value="frog">Frog</option>
  <option value="shark">Shark</option>
var animals = $('#example').selectToCheckbox();

3. Convert a MULTIPLE choose field into a listing of checkboxes.

<select multiple name="animals" id="example">
  <option value="bear">Bear</option>
  <option value="ant">Ant</option>
  <option value="salamander" label="Custom Display Text">Salamander</option>
  <option value="owl">Owl</option>
  <option value="frog">Frog</option>
  <option value="shark">Shark</option>

4. You may populate the chosen field with dynamic data as follows:

// [label:string, value:string, selected?=false, disabled?=false]
var customData = [["San Francisco","a"],
var anotheInstance = $('#example').selectToCheckbox({
    items: customData

5. Determine whether or not allows these choices to be selected/deselected programmatically.

var animals = $('#example').selectToCheckbox({
    allowEnablingAndDisabling: false

6. Full API strategies:

// check if the option with the specified value attribute exists

// select an option

// deselect an option

// check if an option is selected

// enable option x

// disable option x

// check if an option is disabled

// enable/disable the plugin

// get selected options as JSON

Convert Selects Into Checkbox/Radio Inputs, select-to-checkbox Plugin/Github, html code for multi select dropdown with checkbox, convert checkbox to dropdown

See Demo And Download

Official Website(andreww1011): Click Here

This superior jQuery/javascript plugin is developed by andreww1011. For extra Advanced Usages, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…