node package manager

ion-checkradio

Ion.CheckRadio 2.0.0

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.

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

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 plugin development

Manage permissions for the whole team

Manage developer teams with varying permissions and multiple projects. Learn more about Private Packages and Organizations…

how? learn more

Collaborators list

Stats

Try it out

Keywords

jquery-plugin, ecosystem:jquery, forms, checkbox, radio, interface, skins, ui

Dependencies (1)

jquery