select to checkbox radio - Free Download Convert Selects Into Checkbox/Radio Inputs - SelectToCheckbox

Free Download Convert Selects Into Checkbox/Radio Inputs – SelectToCheckbox

Posted on

This time I will share jQuery Plugin and tutorial about Convert Selects Into Checkbox/Radio Inputs – SelectToCheckbox, hope it will help you in programming stack.

select to checkbox radio - Free Download Convert Selects Into Checkbox/Radio Inputs - SelectToCheckbox
File Size: 59.4 KB
Views Total: 149
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SelectToCheckbox is a jQuery plugin that converts single/multiple select boxes into a list of radio or checkbox inputs styled with Bootstrap framework.

See Also:

How to use it:

1. Include the jQuery SelectToCheckbox’s files after loading the latest jQuery library and Bootstrap’s stylesheet.

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

2. Convert a SINGLE select box into a list of radio buttons.

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

3. Convert a MULTIPLE select box into a list of checkboxes.

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

4. You can also populate the select box with dynamic data as follows:

1 // [label:string, value:string, selected?=false, disabled?=false]
2 var customData = [["San Francisco","a"],
3     ["Milan","b",false,true],
4     ["Singapore","c",true],
5     ["Berlin","d",true,true],
6 ];
7 var anotheInstance = $('#example').selectToCheckbox({
8     items: customData
9 });

5. Determine whether allows those options to be selected/deselected programmatically. Default: true.

1 var animals = $('#example').selectToCheckbox({
2     allowEnablingAndDisabling: false
3 });

6. Full API methods:

01 // check if the option with the specified value attribute exists
02 animals.hasOption(value:string);
03  
04 // select an option
05 animals.selectOption(value:string);
06  
07 // deselect an option
08 animals.deselectOption(value:string);
09  
10 // check if an option is selected
11 animals.isOptionSelected(value:string);
12  
13 // enable option x
14 animals.enableOption(value:string);
15  
16 // disable option x
17 animals.disableOption(value:string)
18  
19 // check if an option is disabled
20 animals.isOptionDisabled(value:string);
21  
22 // enable/disable the plugin
23 animals.enable();
24 animals.disable();
25  
26 // get selected options as JSON
27 animals.getSelectedOptionsAsJson(includeDisabled=true)

Changelog:

v1.1.0 (2021-03-11)

  • Append the class cts to select elements and have the plugin be applied automatically.
  • Or define your own selector in $.fn.selectToCheckbox.selector.
  • Access all element groups applied by the plugin in $.fn.selectToCheckbox.applied.