Ion.CheckRadio Demo Page
Feedback and support
If you find some bugs or missing functional in plugins, use Issues page on GitHub
Adv
Ion.CheckRadio customizing demos
Choose skin
HTML5 skin
Cloud skin
Dark skin
Green skin
Simple start with layout #1
// html
<input type="radio" name="reading" value="0" id="reading_0" checked />
<label for="reading_0">Very much</label>
<input type="radio" name="reading" value="1" id="reading_1" />
<label for="reading_1">Sometimes</label>
// JS
$(".js-demo-1").find("input").ionCheckRadio();
Create list of radio-buttons from group of inputs with separated labels
Do you love to read?
// html
<input type="checkbox" name="tour" value="0" id="trip_0" checked />
<label for="trip_0">Towel</label>
<input type="checkbox" name="tour" value="1" id="trip_1" />
<label for="trip_1">Hitchhiker guide</label>
// JS
$(".js-demo-2").find("input").ionCheckRadio();
Create list of checkboxes from group of inputs with separated labels
What would you take to the trip?
Simple start with layout #2
// html
<label for="cars_0"><input type="radio" name="reading" value="0" id="cars_0" checked /> Super fan</label>
<label for="cars_1">
<input type="radio" name="reading" value="1" id="cars_1" />
Love to <b>ride</b>
</label>
// JS
$(".js-demo-3").find("input").ionCheckRadio();
Create list of radio-buttons from group of inputs nested inside the labels
How about cars?
Simple start with layout #3
// html
<label><input type="checkbox" name="browsers" value="chrome" /> Chrome</label>
<label>
<input type="checkbox" name="browsers" value="firefox" />
Firefox
</label>
// JS
$(".js-demo-4").find("input").ionCheckRadio();
Create list of radio-buttons from group of inputs nested inside the labels
What browsers do you like?
Using attributes
// html
<label><input checked disabled type="checkbox" name="thoughts" value="sex" /> Sex</label>
<label><input checked type="checkbox" name="thoughts" value="rest" /> Rest</label>
// JS
$(".js-demo-5").find("input").ionCheckRadio();
Using
disabled and checked attributes
What do you think about?
Recommended predefined layout. For advanced developers
// html
<label class="icr-label">
<span class="icr-item type_radio"></span>
<span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="0" /></span>
<span class="icr-text">Super good</span>
</label>
<label class="icr-label">
<span class="icr-item type_radio"></span>
<span class="icr-hidden"><input class="icr-input" type="radio" name="job" value="1" disabled checked /></span>
<span class="icr-text">Like it</span>
</label>
// JS
$(".js-demo-6").find("input").ionCheckRadio();
Big plus of predefined layout is that the page will not redraw checkboxes and radio-buttons.
They will be ready at very beginning. Please use this in dynamic apps and SPA.
Do you like your job?
Manipulating attributes. For advanced developers
var id = $(this).data("id"),
input = $("#" + id)[0],
type = $(this).data("type");
switch (type) {
case "checked":
input.checked = !input.checked;
break;
case "disabled":
input.disabled = !input.disabled;
break;
default:
input.checked = !input.checked;
input.disabled = !input.disabled;
break;
}
$(input).trigger("change");
Toggling checked attribute from outside the plugin require to trigger an inputs "change" event.
Toggling disabled attribute is working only in modern browsers with Mutation Observer support. IE11+
You may use this polyfill to add support for older browsers.
Toggling disabled attribute is working only in modern browsers with Mutation Observer support. IE11+
You may use this polyfill to add support for older browsers.
Best hello is:
