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

jquery-checkbox-radio-group

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.

checkbox vs radio button, radio button in html, radio buttons vs dropdown, radio button example, bootstrap checkbox, radio button and checkbox in html

How to make use of it:

1. To get began, embody the jquery-checkbox-radio-group.js JavaScript library after loading 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 factor programmatically.

radioGroup.setSelected('radio3');
radioGroup.setUnselected('radio3', true);

Select/Deselect Elements Just Like Checkbox & Radio Button, jquery checkbox radio button Plugin/Github, checkbox ui design, bs radio button


See Demo And Download

Official Website(FCOO): Click Here

This superior jQuery/javascript plugin is developed by FCOO. For extra Advanced Usages, please go to the official website.