Simple plugin to Transform Radio Inputs to HTML Buttons

Simple Button Radios is a simple plugin that converts radio inputs into HTML buttons for CSS customization. High performance, keyboard support, and preservation of original click/change events.

custom radio button jquery, radio button card, styling radio buttons css tricks, stylish radio button in bootstrap, radio button button style, radio button template

How to make use of it:

1. Load the latest jQuery library, simple-button-radios.css, and simple-button-radios.js into the document.

<link rel="stylesheet" href="simple-button-radios.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="simple-button-radios.js"></script>

2. Calling the function will apply default styles to radio buttons on the web page.

<div class="radio">
  <input type="radio" name="genere" id="female" value="female" checked>
  <label for="female">
    Female
  </label>
</div>
<div class="radio">
  <input type="radio" name="genere" id="male" value="male">
  <label for="male">
    Male
  </label>
</div>
<div class="radio">
  <input type="radio" name="genere" id="robot" value="robot" disabled>
  <label for="robot">
    Robot
  </label>
</div>

3. Customize check/deselect icons.

$('input[type="radio"]').simpleButtonRadios({
  checkedIcon : '<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>',
  nonCheckedIcon : ''
});

4. Customize the cover element.

$('input[type="radio"]').simpleButtonRadios({
  wrapContainer : 'none'
});

5. Customize the category and attributes of HTML buttons.

$('input[type="radio"]').simpleButtonRadios({
  buttonClass: "sbr-default",
  btnAttributes : {
    'type' : 'button'
  }
});

6. Callback functions available.

$('input[type="radio"]').simpleButtonRadios({
  onInit : null,
  onChange : null,
  changeCallback : null,
  onDestroy: null
});

7. API methods.

// destroy the plugin
$('input[type="radio"]').simpleButtonRadios('destroy');
// add an event listener to an element
$('input[type="radio"]').simpleButtonRadios('addListener', node);
// enable/disable the plugin
$('input[type="radio"]').simpleButtonRadios('disable', boolean);

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