Selecting all check box in a Table row or column

During one of my assignment I’ve come across a requirement to selecting all the checkboxes in a row or column of table. Accomplishing this task using server side code is really very difficult and need hard coding. So, I’ve come across idea of using jquery. Jquery is really very powerful, and it contains filters and selectors that we can use to select checkboxes.
In the process of selecting checkboxes first step is to recognize whether user want to select row or column. So, I tried to get the parent of checkbox i.e. TH or TD. If it’s a TH then selecting column otherwise row.
Case 1: Selecting row
Selecting row is very simple, by this time you already have instance of TD then by using parent selected we can get the TR of that row.  And once we get TR then selecting checkboxes is piece of cake. Below is the code to select checkboxes.

tr.find('input[type=checkbox]').attr('checked', this.checked);

Case 2: Selecting Columns
Selecting column is little difficult that row. You need to get the index of column in a row.  Although jquery contains function to get index but that function fails when we use colspan. So, I’ve searched to resolve this problem and come across a function to get getNonColSpanIndex of a column. Once we get the index of column then we can select all the checkboxes in that column

var i = th.getNonColSpanIndex();
var table = tr.parent();
table.find('tr.odd').each(function () {
   var td = $(this).children();
   td.eq(i).find('input[type=checkbox]').attr('checked', Ischecked);
});

So with this much jQuery code we are able to achieve our aim of selecting all checkboxes in a row and column. You can use this jquery to select any control in a row or column.
Sample code attached selector.zip (1.32 kb)

Comments

Popular posts from this blog

Installation and Configuration of Office Online Server with SharePoint 2019

Workflow Manager 1.0- Installation, Configuration and Issues

SharePoint 2019 Upgrade Part 6: SharePoint Upgrade Issues