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

Features:

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>
</select>

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>
</select>

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"],
    ["Milan","b",false,true],
    ["Singapore","c",true],
    ["Berlin","d",true,true],
];
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
animals.hasOption(value:string);

// select an option
animals.selectOption(value:string);

// deselect an option
animals.deselectOption(value:string);

// check if an option is selected
animals.isOptionSelected(value:string);

// enable option x
animals.enableOption(value:string);

// disable option x
animals.disableOption(value:string)

// check if an option is disabled
animals.isOptionDisabled(value:string);

// enable/disable the plugin
animals.enable();
animals.disable();

// get selected options as JSON
animals.getSelectedOptionsAsJson(includeDisabled=true)

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