jQuery Selectable Plugin - Turn anything into selectable/checkable element Fork me on GitHub

jquery.selectable.js

Turn anything into selectable/checkable element.

Include a hidden checkbox inside your fancy checkbox element. Selectable plugin handle checking the real checkbox for you.

Hey You Should Click Me
$('#example1 .btn').selectable({
  class: 'btn-info'
})

The same for radio buttons, just include a hidden input radio, the plugin handle selecting it for you.

Hey You Should Click Me
$('#example2 .btn').selectable({
  radio: true,
  class: 'btn-inverse'
})
        

Callbacks

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()