jQuery plugin for styling checkboxes and radio-buttons
JavaScript CSS
Latest commit 156c170 Nov 5, 2015 @IonDen Update readme
Permalink
Failed to load latest commit information.
PSD First release 1.0.0 Jul 21, 2013
_tmp Logo added Sep 19, 2015
css Update to 2.0.0 Jun 5, 2015
img First release 1.0.0 Jul 21, 2013
js Update to 2.0.0 Jun 5, 2015
bower.json Update to 2.0.0 Jun 5, 2015
history.md Logo added Sep 19, 2015
ion-checkRadio.jquery.json Update to 2.0.0 Jun 5, 2015
package.json Update to 2.0.0 Jun 5, 2015
readme.md Update readme Nov 5, 2015
readme.ru.md Update readme Nov 5, 2015

readme.md

ion.checkRadio

English description | Описание на русском

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


Description

  • 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.).
  • Ion.CheckRadio freely distributed under terms of MIT licence.

Demo Page

Dependencies

Using script

Import this libraries:

  • jQuery
  • ion.checkRadio.min.js

And 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 - skin sprite
  • Or use included PSD file and draw your own skin

Install with bower

  • bower install ion-checkradio

Install with npm

  • npm install ion-checkradio

Install with spm

  • spm install ion-checkradio

Recommended HTML

Radio-buttons:

<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!radio_value_1!" /></span>
    <span class="icr-text">!radio_text_1!</span>
</label>
<label class="icr-label">
    <span class="icr-item type_radio"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!radio_value_2!" /></span>
    <span class="icr-text">!radio_text_2!</span>
</label>

Checkboxes:
<label class="icr-label">
    <span class="icr-item type_checkbox"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!checkbox_value_1!" /></span>
    <span class="icr-text">!checkbox_text_1!</span>
</label>
<label class="icr-label">
    <span class="icr-item type_checkbox"></span>
    <span class="icr-hidden"><input class="icr-input" type="radio" name="!group_name!" value="!checkbox_value_2!" /></span>
    <span class="icr-text">!checkbox_text_1!</span>
</label>

Regular HTML

Create 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

<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 them</label>

or drop some checkboxes:

<label><input type="checkbox" name="think" value="0" /> Self</label>
<label><input type="checkbox" name="think" value="1" /> Money</label>
<label><input type="checkbox" name="think" value="2" /> Stuff</label>
<label><input type="checkbox" name="think" value="3" /> Health</label>
<label><input type="checkbox" name="think" value="4" /> Work</label>
<label><input type="checkbox" name="think" value="5" checked /> Rest</label>
<label><input type="checkbox" name="think" value="6" disabled checked /> Sex</label>

Initialize slider

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

// or specific only:
$(".my_inputs").ionCheckRadio();

Success!

Update history


Support Ion-series plugins development: