Multiple Checkbox Select/Deselect Using JQuery – Tutorial With Example

Almost all the user interfaces that I have created had this functionality of selecting multiple items from a list to process them or delete them. Although its very very easy to implement this functionality in Javascript, using jQuery for this is real fun. I will show you a simple implementation of adding multiple checkbox select and deselect functionality to any webpage. We will have a table with some data in it and checkbox in each row. There will be a select all checkbox in the header of the table. If user select/deselect the selectall checkbox, all the checkbox in table will get selected or deselected accordingly. Now one more thing we would like here to add is, suppose user select all the checkbox one by one then the selectall checkbox should be automatically gets selected. And if user click selectall first

Add following jQuery code in HEAD section of above HTML


















Here in above code at line 05, we register a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable.

Also check the link 13, where we check the selectall checkbox, if all the checkbox are selected manually. To get more idea, play with the below demo.