Popularity
1.1
Stable
Activity
0.0
Stable
67
9
21

Programming language: JavaScript
License: MIT License
Tags: Input     Form Widgets     UI     Ecosystem:jquery     Jquery-plugin     Skins     Interface     Radio     Checkbox     Forms    
Latest version: v2.0.0

Ion.CheckRadio alternatives and similar libraries

Based on the "Input" category.
Alternatively, view Ion.CheckRadio alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Ion.CheckRadio or a related project?

Add another 'Input' Library

README

[ion.checkRadio](_tmp/logo-ion-check-radio.png)

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

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


  • Version: 2.0.0
  • Project page and demos
  • Download ZIP

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

  • jQuery 1.9+

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: