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.

Easily change the look and feel of HTML <select> elements:

  • options of a single <select> displayed as radio buttons.
  • options of multiple <select> displayed as checkboxes.
  • ability to programmatically select, deselect, enable and disable options.

Uses Bootstrap classes for styling. Easily modify CSS to match your theme.

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 are added dynamically, to quickly link

Check Here – [icheck] Pure CSS Checkboxes and Radio Buttons for Twitter Bootstrap

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 are 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)

API

The following methods are exposed on the plugin:

  • hasOption(value:string) – returns true if the option with the specified value attribute exists, otherwise false.
  • selectOption(value:string) – selects the option with the specified value attribute, otherwise does nothing if it does not exist or if it is disabled.
  • deselectOption(value:string) – deselects the option with the specified value attribute, otherwise does nothing if it does not exist or if it is disabled.
  • isOptionSelected(value:string) – returns true if the option with the specified value attribute exists and is selected, otherwise false.
  • enableOption(value:string) – enables the option with the specified value attribute, otherwise does nothing if it does not exist or if enabling is not permitted.
  • disableOption(value:string) – disables the option with the specified value attribute, otherwise does nothing if it does not exist or if disabling is not permitted.
  • isOptionDisabled(value:string) – returns true if the option with the specified value attribute exists and is disabled, otherwise false.
  • enable() – enables this group, otherwise does nothing if enabling is not permitted.
  • disable() – disables this group, otherwise does nothing if disabling is not permitted.
  • getSelectedOptionsAsJson(includeDisabled=true) – returns a JSON string of the selected options’ values.

The following global fields are exposed on the jQuery extension point:

  • $.fn.selectToCheckbox.selector – the selector string used to automatically target and apply the plugin. default = “select.stc”
  • $.fn.selectToCheckbox.applied – a collection of all element groups applied by the plugin.

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

Read More – 

Star Rating Control Based On Radio Inputs With Pure CSS
A Lightweight Web Component Assistant for HTML5 Videos | Video Radio Star


See Demo And Download

Official Website(andreww1011): Click Here

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

Share