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.
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.
2 |
< link rel = "stylesheet" href = "/path/to/cdn/bootstrap.min.css" /> |
3 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
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 > |
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 > |
1 |
var animals = $( '#example' ).selectToCheckbox(); |
4. You can also populate the select box with dynamic data as follows:
2 |
var customData = [[ "San Francisco" , "a" ], |
3 |
[ "Milan" , "b" , false , true ], |
4 |
[ "Singapore" , "c" , true ], |
5 |
[ "Berlin" , "d" , true , true ], |
7 |
var anotheInstance = $( '#example' ).selectToCheckbox({ |
5. Determine whether allows those options to be selected/deselected programmatically. Default: true.
1 |
var animals = $( '#example' ).selectToCheckbox({ |
2 |
allowEnablingAndDisabling: false |
6. Full API methods:
02 |
animals.hasOption(value:string); |
05 |
animals.selectOption(value:string); |
08 |
animals.deselectOption(value:string); |
11 |
animals.isOptionSelected(value:string); |
14 |
animals.enableOption(value:string); |
17 |
animals.disableOption(value:string) |
20 |
animals.isOptionDisabled(value:string); |
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.