How to check all checkboxes with another single checkbox check

Dear Readers, I have shown in last article that how we can delete selected record with the help of classis ADO.NET. You can read that article from here.

Now we will learn that how to select all checkboxes on click of a single checkbox. Please read last article to understand this article clearly.

We will use Jquery to perform above task.

You have to do all changes in the view code only. Add JQuery script file in the view page. You can find it from scripts folder of your application or you can download it for free from here.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

Note: You are not restricted to use 1.10.2 version only. You can use above versions also.

After adding the script file add the following code below the script file –

<script type="text/javascript">

        $(document).ready(function () {

            $('#chkAll').click(function () {

                if (this.checked) {

                    $("input[name='deletedata']").each(function () {

                        this.checked = true;

                    });

                }

                else

                {

                    $("input[name='deletedata']").each(function () {

                        this.checked = false;

                    });

                }

            });

        });

    </script>

Here, 'deletedata' is the name of checkbox which is inside loop of the view page.

Add the checkbox control as per your need. This is the checkbox, all check boxes will be checked when this will be checked. The code is –

<input type="checkbox" name="chkSelectAll" id="chkAll" />

Now it is done.

Run the code and get the desired output.

Happy Coding.

Rudra Pratap Singh

Software Engineer

singhrudrapratap29[at]gmail[dot]com