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
Official Websitegithub.com
Publish DateFebruary 1, 2021
Last UpdateJuly 24, 2023
DownloadLink Below
LicenseMIT

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

IdTypeDefaultForDescription
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

jquery-checkbox-radio-group

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

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…

Bootstrap-Fileinput

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….

HStack-and-VStack-in-CSS

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…

Floating-Whatsapp-Chat-Button

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…

Data-Table-Generator-Tabulator

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…

alert-confirm-prompt-attention-js

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 *