Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

11 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
    3. The .prop() function works for me and i also replace removeAttr with removeProp().

      Delete
    4. yes prop worked for me

      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
  5. i can only able to delete the rows without popup boxes and when i select all checkboxes then header checkbox is not selected. the code i written is as same as in the video but with jquery-1.10.2.min.js

    i tried with attr() also but i didnot get the output as expected. help me

    ReplyDelete
  6. Hey - you started working with Paging then dropped Paging to add checkboxes to select multiple records. Can you do this again but do it with Paging?

    ReplyDelete
  7. Missing submit button ID

    [input type="submit" id="btnSubmit" value="Delete selected employees" /]

    ReplyDelete

It would be great if you can help share these free resources