Turn anything into selectable/checkable element.
Include a hidden checkbox inside your fancy checkbox element. Selectable plugin handle checking the real checkbox for you.
$('#example1 .btn').selectable({
class: 'btn-info'
})
The same for radio buttons, just include a hidden input radio, the plugin handle selecting it for you.
$('#example2 .btn').selectable({
radio: true,
class: 'btn-inverse'
})
var handler = $('#example3 .btn').selectable({
class: 'btn-inverse',
onSelected: function(el) {
console.log("onSelected -> ", el);
},
onChange: function(data) {
var ids = [];
$(data.selected).each(function(){
ids.push($(this).prop('tagName'))
});
data.selected = ids;
$('#example3-output').append("onChange -> " + JSON.stringify(data) + "\n");
}
});
// Supported functions
handler.toggleSelectAll()
handler.selectAll()
handler.deselectAll()
handler.removeSelected()