Check Or Uncheck Checkboxes within GridView in ASP.NET using JQuery


How to implement check and uncheckboxes within the gridview control using asp.net:
Source:

Introduction

Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.

Implementation

    Let’s we have 10 rows in gridview with first column to select user each rows to perform operation. On this time user can’t check each check box to select, because its consume time and it is not good user friendly system as well.
So I have implemented to features to select all checkbox or deselect all checkboxes in one click using a common check box. Even let’s say I have 10 records with checkboxes, but user want to select 5, 8 and 10. With less number of click and also without refresh page. Please try live demo end of the this article.

Let’s walk step by step to implement it.

Step 1

As usual create a new web project using visual studio 2008 and give name to project is “JQueryChkBox”.
Note: you can use any name to project.

Step 2

Add a GridView with few columns in page as like below,

Html Code

The first column has a template field to customize the header and row for this column. The header template will have a checkbox to check or uncheck checkboxes with one click. The item template will have checkbox for represent each row.

Step 3

Let’s create a simple data source to bind to grid view. This data source is custom object collection of the publishers.
Note: I have attached sample project end of this article you can download it.

C# Code

Run and see output like shown,

 Output

Image Loading

Step 4
    In order work with JQuery, we have to add JQuery library in page as like bellow,
JavaScript

I’m always to prefer refer JQuery library source from Google CDN.

Step 5

Now write few lines of JavaScript code to access checkbox controls within gridview and implement features.

JavaScript

Code Explanation

1.    The first line is defining document ready event for jquery.
2.    In the next line get all checkboxes within the gridview with id “chkselection” and type is checkbox.

3.    Next line is get the header checkbox with id is “chkAll” to perform the change event later part of the code.

4.    Next line for register change event to the checkbox (header) and then loop each row checkbox and validate is checked or not, if not checked then check otherwise uncheck.

5.    $(this).is(‘:checked’) is help to verify a checkbox is checked or unchecked
6.    $(this).attr(‘checked’, false); is used to set attibute “checked” is true or false. If true means its check else uncheck.
 

Step 6

Now run application and output like as shown below,

Image Loading

Live Demo

Check Or Uncheck Checkboxes within GridView

Download Sample Project 

Download source files -2 kb

Introduction

Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.

Implementation

    Let’s we have 10 rows in gridview with first column to select user each rows to perform operation. On this time user can’t check each check box to select, because its consume time and it is not good user friendly system as well.
So I have implemented to features to select all checkbox or deselect all checkboxes in one click using a common check box. Even let’s say I have 10 records with checkboxes, but user want to select 5, 8 and 10. With less number of click and also without refresh page. Please try live demo end of the this article.

Let’s walk step by step to implement it.

Step 1

As usual create a new web project using visual studio 2008 and give name to project is “JQueryChkBox”.
Note: you can use any name to project.

Step 2

Add a GridView with few columns in page as like below,

Html Code

The first column has a template field to customize the header and row for this column. The header template will have a checkbox to check or uncheck checkboxes with one click. The item template will have checkbox for represent each row.

Step 3

Let’s create a simple data source to bind to grid view. This data source is custom object collection of the publishers.
Note: I have attached sample project end of this article you can download it.

C# Code

Run and see output like shown,

 Output

Image Loading

Step 4
    In order work with JQuery, we have to add JQuery library in page as like bellow,
JavaScript

I’m always to prefer refer JQuery library source from Google CDN.

Step 5

Now write few lines of JavaScript code to access checkbox controls within gridview and implement features.

JavaScript

Code Explanation

1.    The first line is defining document ready event for jquery.
2.    In the next line get all checkboxes within the gridview with id “chkselection” and type is checkbox.

3.    Next line is get the header checkbox with id is “chkAll” to perform the change event later part of the code.

4.    Next line for register change event to the checkbox (header) and then loop each row checkbox and validate is checked or not, if not checked then check otherwise uncheck.

5.    $(this).is(‘:checked’) is help to verify a checkbox is checked or unchecked
6.    $(this).attr(‘checked’, false); is used to set attibute “checked” is true or false. If true means its check else uncheck.
 

Step 6

Now run application and output like as shown below,

Image Loading

Live Demo

Check Or Uncheck Checkboxes within GridView

Download Sample Project 

Download source files -2 kb

Leave a Reply

Your email address will not be published. Required fields are marked *

*