Ion.CheckRadio 1.1.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 pledgie.com !

Adv

Описание

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

Demos

Cloudy skin Dark skin Green skin
Do you love to read?
Do you like movies?
What would you take to the trip?
Do you agree?
What do you think about?

Dependencies

Using script

Import this libraries:

  • jQuery
  • ion.checkRadio.min.js

CSS:

  • 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>

Initialize the plugin:

$("input[type='radio'], input[type='checkbox']").ionCheckRadio();

Success!

Update history

  • April 30, 2014 - Many minor changes and bug fixes. Also fixed issues: #1, #5, #7
  • August 05, 2013 - minor bug with onChange event fixed
  • July 31, 2013 - minor enhancement
  • July 21, 2013 - release

Download

Share

comments powered by Disqus
Fork me on GitHub