|
Radio Button Widget
Radio buttons are useful to capture user's either or options. Nedil JS radio widget can be used to create multiple radio buttons in vertical or horizontal layout.
Layout can be "Vertical" or "Horizontal". Default is vertical. Usage $.domLoaded(function() {
$.get("#pan").widget("radio", RADIO_ARRAY, LAYOUT);
}
Radio Button Array Options
It contains array of JSON objects. Each JSON will represent a single radio button and it's properties. The properties are mentioned below.
Methods
Radio Button Widget Example
JS
HTML
$.domLoaded( function() {
// create radio group
$.get("#cbox1").widget("radio",[
{id: "cin", name : "rad1", value: "cinema", text : "Cinema", enabled: true},
{id: "dan", name : "rad1", text : "Dance", enabled: true},
{id: "mus", name : "rad1", text : "Music", enabled: true}
]);
$.get("#cbox2").widget("radio",[
{id: "cin", name : "rad2", value: "cinema", text : "Cinema", enabled: true},
{id: "dan", name : "rad2", text : "Dance", enabled: true},
{id: "mus", name : "rad2", text : "Music", enabled: true}
], "horizontal");
$.get("#cbox3").widget("radio",[
{id: "cin", name : "rad3", value: "cinema", text : "Cinema", enabled: false},
{id: "dan", name : "rad3", text : "Dance", enabled: false, select: true},
{id: "mus", name : "rad3", text : "Music", enabled: true}
], "horizontal");
var cb = $.get("#cbox4").widget("radio",[
{id: "cin", name : "rad4", value: "cinema", text : "Cinema"},
{id: "dan", name : "rad4", text : "Dance"},
{id: "mus", name : "rad4", text : "Music"}
], "horizontal");
// enable / disable
$.get("#toggle").on("click", function() {
if(cb.chklist[0].enabled) {
cb.disable(0);
} else {
cb.enable(0);
}
});
// select / unselect
$.get("#select").on("click", function() {
cb.select(1);
});
});
Result
| |||||||||||||||||||||||||||||||||||
|
|