Ion.CheckRadio Demo Page

Feedback and support

If you find some bugs or missing functional in plugins, use Issues page on GitHub

Click here to lend your support to: Nokia Lumia for plugins testing and make a donation at pledgie.com !

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.
Best hello is:
Fork me on GitHub