An Object to Control Which Acts as a Checkbox or Radio Items

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 NamejQuery Checkbox Radio Group
Author NameFCOO
CategoryForm Plugins,
Official PageClick Here | Click Here
Publish DateFebruary 1, 2021
Last UpdateJuly 24, 2023
DownloadLink Below

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>
  onChange: function(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>
  onChange : function(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>
var radioGroup = $.radioGroup({
    radioGroupId: 'myRadioGroup', 
    onChange: function(id, selected, $radio, groupId ){ 

.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.setUnselected('radio3', true);


idString""1Id for the element
selectedBooleanfalse1If true the element is selected as default
prop_semiclassName_semiString""2Same as className and prop but used when the parent element is in semi-selected mode e.q. selected elements > 0 and < max
radioGroupIdString""3Id for the group
selectedIdString""3The id of the select element
allowZeroSelectedBooleanfalse3If true the radio buttons can be deselected
allowReselectBooleanfalse3If 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.

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *