|
Check Box Widget
Check boxes are useful to capture user's options / selections, etc... Nedil JS checkbox widget can be used to create multiple checkboxes in vertical or horizontal layout.
Layout can be "Vertical" or "Horizontal". Default is vertical. Usage $.domLoaded(function() {
$.get("#pan").widget("checkbox", CHECK_BOX_ARRAY, LAYOUT);
}
Check Box Array Options
It contains array of JSON objects. Each JSON will represent a single checkbox and it's properties. The properties are mentioned below.
Methods
Check Box Widget Example
JS
HTML
$.domLoaded( function() {
// create checkbox group
$.get("#cbox1").widget("checkbox",[
{id: "cin", name : "cin", value: "cinema", text : "Cinema", enabled: true},
{id: "dan", name : "dan", text : "Dance", enabled: true},
{id: "mus", name : "mus", text : "Music", enabled: true}
]);
$.get("#cbox2").widget("checkbox",[
{id: "cin", name : "cin", value: "cinema", text : "Cinema", enabled: true},
{id: "dan", name : "dan", text : "Dance", enabled: true},
{id: "mus", name : "mus", text : "Music", enabled: true}
], "horizontal");
$.get("#cbox3").widget("checkbox",[
{id: "cin", name : "cin", value: "cinema", text : "Cinema", enabled: false},
{id: "dan", name : "dan", text : "Dance", enabled: false, select: true},
{id: "mus", name : "mus", text : "Music", enabled: true}
], "horizontal");
var cb = $.get("#cbox4").widget("checkbox",[
{id: "cin", name : "cin", value: "cinema", text : "Cinema"},
{id: "dan", name : "dan", text : "Dance"},
{id: "mus", name : "mus", 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
| |||||||||||||||||||||||||||||||||||
|
|