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.
-
jQuery-Autocomplete
Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields -
jQuery-Tags-Input
DISCONTINUED. Magically convert a simple text input into a cool tag list with this jQuery plugin.
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Ion.CheckRadio or a related project?
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:
Donate direct to my Paypal account: https://www.paypal.me/IonDen
Donate direct to my Yandex.Money account: http://yasobe.ru/na/razrabotku