Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Part 66 - Check uncheck all checkboxes with another single checkbox using jquery

Suggested Videos 
Part 63 - Implement paging
Part 64 - Implement sorting
Part 65 - Deleting multiple rows

In this video, we will discuss, how to check/uncheck all checkboxes with another single checkbox using jquery in an asp.net mvc application. Please watch Part 65, before proceeding.



We want the output as shown below
Check uncheck all checkboxes using jquery



Here is the requirement
1. When the checkbox in the header is selected, all the checkboxes in the respective rows should be selected. If we deselect any of the checkbox, then the header checkbox should be automatically deselected.
2. When the checkbox in the header is deselected, all the checkboxes in the respective rows should be deselected as well. If we start to select each checkbox in the datarows, and upon selecting checkboxes in all the datarows, the checkbox in the header should be selected.
3. We also need a client side confirmation, on the number of rows to be deleted. The selected rows should be deleted from the database table, only when OK button is clicked. If cancel button is clicked, the form should not be posted to the server, and no rows should be deleted.

Here's the required jQuery script. Please paste this in the "Index.cshtml" view.
<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(function () {
        $("#checkAll").click(function () {
            $("input[name='employeeIdsToDelete']").attr("checked", this.checked);

            $("input[name='employeeIdsToDelete']").click(function () {
                if ($("input[name='employeeIdsToDelete']").length == $("input[name='employeeIdsToDelete']:checked").length) {
                    $("#checkAll").attr("checked", "checked");
                }
                else {
                    $("#checkAll").removeAttr("checked");
                }
            });

        });
        $("#btnSubmit").click(function () {
            var count = $("input[name='employeeIdsToDelete']:checked").length;
            if (count == 0) {
                alert("No rows selected to delete");
                return false;
            }
            else {
                return confirm(count + " row(s) will be deleted");
            }
        });
    });    
</script>

jQuery file can also be referenced from the following website
jQuery - http://code.jquery.com/jquery-latest.min.js
Google - http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Microsoft - http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js

6 comments:

  1. plzzz upload a series of jquery also.......its very urgent or send me the link of better understnding of j query...means which tutorial is best for jquery on internet or which book is beat

    ReplyDelete
  2. Hi Venkat,Plz upload videos of Jquery along with mvc

    ReplyDelete
  3. hi venkat ,

    jquery not working as expected when referring to CDN.
    check unchecked more then one time its wont work with CDM.
    with script folder its working proper not able to find why.

    ReplyDelete
    Replies
    1. Please try with the prop method instead of attr

      Delete
    2. (Please try with the prop method instead of attr)
      Thanks...

      Delete
  4. Hi Venkat,

    This is a great video, i personally had this requirement.
    It would be really helpful if you could make a video series on JQuery.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.