Ion.CheckRadio 2.0.0
jQuery plugin for styling checkboxes and radio-buttons.
With skin support

Feedback and support

If you find some bugs or missing functional in plugins, use Issues page on GitHub

Click here to lend your support to: Nokia Lumia for plugins testing and make a donation at !



  • Ion.CheckRadio — nice and easy jQuery-plugin for checkbox and radio-buttons customization.
  • With skin support
  • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Ion.CheckRadio supports touch-devices (iPhone, iPad, etc.).
  • GitHub page.
  • Ion.CheckRadio freely distributed under terms of MIT licence.



Install with bower

  • bower install ion-checkradio

Install with npm

  • npm install ion-checkradio

Install with SPM   spm

  • spm install ion-checkradio

Using script

Import this libraries:

  • jQuery
  • ion.checkRadio.min.js


  • normalize.min.css - desirable if you have not yet connected one
  • ion.checkRadio.css
  • ion.checkRadio.skinName.css

Don't forget about skin image:

  • icr-skinName-skin.png - sprite
  • Or use included PSD file and draw your own skin

Make checkboxes and/or radio-buttons:

<input type="radio" name="reading" value="0" id="reading_0" /> <label for="reading_0">Very much</label>
<input type="radio" name="reading" value="1" id="reading_1" /> <label for="reading_1">Sometimes</label>
<input type="radio" name="reading" value="2" id="reading_2" /> <label for="reading_2">Better watch movie</label>
<input type="radio" name="reading" value="3" id="reading_3" /> <label for="reading_3">Hate it</label>
or that way:
<label><input type="radio" name="movies" value="0" /> Love them</label>
<label><input type="radio" name="movies" value="1" /> Like them</label>
<label><input type="radio" name="movies" value="2" /> Indifferent</label>
<label><input type="radio" name="movies" value="3" /> Hate it</label>
or drop some checkboxes:

<label><input type="checkbox" name="think" value="0" /> Work</label>
<label><input type="checkbox" name="think" value="1" checked /> Rest</label>
<label><input type="checkbox" name="think" value="2" disabled checked /> Sex</label>

or predefine layout (preferred):

<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="0" /></span>
    <span class="icr-text">Super good</span>

<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="1" disabled checked /></span>
    <span class="icr-text">Like it</span>

Initialize the plugin:

// all on the page:
$("input[type='radio'], input[type='checkbox']").ionCheckRadio();

// or specific only:





comments powered by Disqus
Fork me on GitHub