Checkbox-radio-group is a jQuery plugin that allows the user to select/deselect a single item or group of items just like checkboxes and radio buttons.
Must Read: Convert Selected Item Into Checkboxes jQuery Plugin Radio Buttons
jQuery Checkbox Radio Group Details
Post Name | jQuery Checkbox Radio Group |
Author Name | FCOO |
Category | Form Plugins, |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | February 1, 2021 |
Last Update | July 24, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. To get begun, embody the jquery-checkbox-radio-group.js
JavaScript library after loading the jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/dist/jquery-checkbox-radio-group.js"></script>
2. Enable a component to be selectable similar to a single checkbox.
<div class="example">First Div</div> <div class="example">Second Div</div> ...
$('.example').checkbox({ onChange: function(id, selected){ console.log(id+':'+selected) } });
3. Enable a group of parts to be selectable similar to a checkbox group.
<div id="parent">Parent Element</div> <div id="container"> <div id="no1">1</div> <div id="no2">2</div> <div id="no3">3</div> ... </div>
$('#parent').checkboxGroup({ onChange : function(id, selected){ console.log(id,':',selected) } }) .addElement( $('#container'), 'div') .addElement( $('#no3'), { onChange: function(id, selected){ console.log('I an special!', id,':',selected) } });
4. Enable a group of parts to be selectable similar to a checkbox group.
<div id="radioGroup"> <div id="radio1">Radio id=radio1</div> <div id="radio2">Radio id=radio2</div> <div id="radio3">Radio id=radio3</div> ... </div>
var radioGroup = $.radioGroup({ radioGroupId: 'myRadioGroup', onChange: function(id, selected, $radio, groupId ){ console.log(groupId+':'+id+'=>'+selected); } }); radioGroup .addElement( $('#radio1, #radio2') ) .addElement( $('#radio3'), { onChange: function(id, selected){ console.log('I an special!', id,':',selected) } });
5. All default plugin settings.
{ id: null prop: '', className: '', className_semi: '', selector: null, modernizr: false, selected: false, semiSelected: false, onChange: function(){} }
6. Select & deselect factors programmatically.
radioGroup.setSelected('radio3'); radioGroup.setUnselected('radio3', true);
Options
Id | Type | Default | For | Description |
---|---|---|---|---|
id | String | "" | 1 | Id for the element |
selected | Boolean | false | 1 | If true the element is selected as default |
prop_semi , className_semi | String | "" | 2 | Same as className and prop but used when the parent element is in semi-selected mode e.q. selected elements > 0 and < max |
radioGroupId | String | "" | 3 | Id for the group |
selectedId | String | "" | 3 | The id of the select element |
allowZeroSelected | Boolean | false | 3 | If true the radio buttons can be deselected |
allowReselect | Boolean | false | 3 | If true the onChange will be called when a selected item is reselected/clicked |
See Demo And Download

Official Website(FCOO): Click Here
This superior jQuery/javascript plugin is developed by FCOO. For extra Advanced Usage, please go to the official website.