Simple button radios

Simple button radios is a simple plugin for transform radio inputs into html buttons for css customize. High performance, keyboard support and preserve original input click/change events.

Getting started

1. Include Simple button radios files to website/app

After that we need to include CSS and JS files to our website/app. In your html file:

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="path/to/simple-button-radios.css"> </head> <body> <script src="path/to/jquery/3.x.x.min.js"></script> <script src="path/to/simple-button-radios.js"></script> </body> </html>

2. Add html inputs

This plugin contemplates several label-input formats:

<div class="radio"> <input type="radio" name="example" id="example1" value="1" checked> <label for="example1">Use address 1</label> </div> <div class="radio"> <input type="radio" name="example" id="example2" value="2"> <label for="example2">Use address 2</label> </div>  <div class="radio"> <label for="example1">Use address 1</label> <input type="radio" name="example" id="example1" value="1" checked> </div> <div class="radio"> <label for="example2">Use address 2</label> <input type="radio" name="example" id="example2" value="2"> </div>

3. Initialize plugin

After load jquery and simple-button-radios js files

$(document).ready(function () { // initialize plugin into document ready $('input[type="radio"]').simpleButtonRadios(); });

Options

Parameter	Type	Default	Description
`buttonClass`	`string`	`'sbr-default'`	Class attribute value for new html button tag
`checkedIcon`	`string`	`'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="-725.53 115.775 1451.338 1451.338"><path d="M.141 376.731c-256.717 0-464.713 207.995-464.713 464.713 0 256.72 207.997 464.715 464.713 464.715 256.718 0 464.712-207.995 464.712-464.715 0-256.718-207.994-464.713-464.712-464.713z"/></svg>'`	button inner html when input is checked
`nonCheckedIcon`	`string`	`''`	button inner html when input is not checked
`wrapContainer`	`string`	`'none'`	Values: 'none' or 'input' or 'all'. Wrap with a div label and input, only input or nothing.
`btnAttributes`	`object`	`{ type : 'button' }`	Add attribute name - value into new html button. Example: `btnAttributes: { data-title : 'string value' }`

Callbacks

Parameter	Type	Default	Description
`onInit(simpleButtonRadios)`	`function`	`null`	Callback function, will be executed right after plugin initialization
`onChange(simpleButtonRadios)`	`function`	`null`	Function, will be executed right before radio input change
`changeCallback(simpleButtonRadios)`	`function`	`null`	Callback function, will be executed right after radio input change
`onDestroy(simpleButtonRadios)`	`function`	`null`	Callback function, will be executed when you destroy Swiper

Methods

After we initialize input/s we have its initialized instance in variable (like myInput variable in example below) with helpful methods:

var myInput = $('#check-1').simpleButtonRadios({ checkedIcon : '<span class="custom-icon"></span>' }); myInput.simpleButtonRadios('destroy');

Check / unckeck

Mode 1: jQuery prop method into original input and update method.
$('#check-one').prop('checked', true).simpleButtonRadios('update');

Mode 2: jQuery prop method into original input with change event:
$('#check-one').prop('checked', true).trigger('change');

Mode 3: Use click event into original input:
$('#check-one').click();

Method	Description
`myInput.simpleButtonRadios('destroy');`	Destroy simpleButtonRadios instance and detach all events listeners
`myInput.simpleButtonRadios('addListener', node);`	Add change radio input event to a node. Example: `myInput.simpleButtonRadios('addListener', $('#div-1'));`
`myInput.simpleButtonRadios('disable', boolean);`	Enable \| disable input. Example: `myInput.simpleButtonRadios('disable', true);`
`myInput.simpleButtonRadios('update');`	Refresh all radios grouped by name attr

Demo

Customized

Defaults & js check tests

Add dynamic radios

Changelog

1.0.4

Fix on destroy and disable public methods undefined data
Fix apply method on elements without data
Fix destroy method not remove focus events

1.0.3

Add update method
Update demos and add demo with dynamic inputs

1.0.2

Fix bug inputId is undefined

1.0.1

Now is possible unckeck all radios
Removed strictLabel option, use native browser function
Update documentation info and add default plugin demos