jQuery.selectr v 1.0

When applying this jQuery plugin to a table, a column is appended to each row allowing the visitor to check or uncheck a certain number of rows in a global way or individually.

A certain number of options is provided allowing, for instance, to limit the number of checkable rows or to provide a callback function when the maximum number of checked rows is reached.

All the ids of the checked rows are stored in a jQuery data object accessible by any jQuery function you have eslewhere in your code.

Basic use

The basic use .

  1. $("table").selectr();
Choose your favorite Star Wars movie(s) by clicking on the checkboxes ...
Movie Date
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005

Changing class for highlighted rows

You can define the css class to be applied to the selected rows so that you can have specific styles for your different tables.

  1. $("#tableId").selectr({
  2. highlight: "classname"
  3. });
These rows belong to the dark side ...
Movie Date
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005

Right/left position

You can define the css class to be applied to the selected rows so that you can have specific styles for your different tables.

  1. $("#tableId").selectr({
  2. position: "right"/"left"
  3. });
Vote for your two favorite Star Wars movie(s) by clicking on the checkboxes ...
Movie Date
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005

Setting a counter

On big tables it might be useful to display the count of checked rows, this is done via the count option. You will need however to create a tfoot in your table in order to display the counter.

  1. $("#tableId").selectr({
  2. count: true/false
  3. });
Vote for your two favorite Star Wars movie(s) by clicking on the checkboxes ...
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005

Setting a maximum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

  1. $("table").selectr({
  2. checkMax: 2
  3. });
Vote for your two favorite Star Wars movie(s) by clicking on the checkboxes ...
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005

Providing a callback function

You can provide a callback function to be run on each click on the checkboxes or when the maximum number of checked checkboxes is reached. The second mode requires a value for checkMax.

  1. $('#tableId').selectr({
  2. checkMax: 3
  3. }, function() {
  4. // here goes the code of your callback function
  5. });
Vote for your two favorite Star Wars movie(s) by clicking on the checkboxes ...
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005

List of checked rows:

Pre-checking radioboxes

You can provide a callback function to be run on each click on the checkboxes or when the maximum number of checked checkboxes is reached. The second mode requires a value for checkMax.

  1. $('#tableId').selectr({
  2. list: [2,4,5]
  3. });
Vote for your two favorite Star Wars movie(s) by clicking on the checkboxes ...
IV A New Hope 25 May 1977
V The Empire Strikes Back 21 May 1980
VI Return of the Jedi 25 May 1983
I The Phantom Menace 19 May 1999
II Attack of the Clones 16 May 2002
III Revenge of the Sith 19 May 2005