How to use checkall when checked one checkbox in JQuery

Question

I have a table that has five checkboxes(Add, Edit, View, Delete, All). These table rows are generated dynamically. Code for that is as follows:

<div class="tablecontatiner">
    <table>
        <tr>
            <th>Function</th>
            <th>Add</th>
            <th>Edit</th>
            <th>View</th>
            <th>Delete</th>
            <th>All</th>
        </tr>
        @foreach (var item in Model)
        {
        <tr class="grouprow">
            <td><input type="hidden"/><input id="@(item.Func_Code)" type="checkbox"  style="visibility:hidden" />@item.FunctionName</td>
            <td><input id="@(item.Func_Code + "A")" type="checkbox" value="Add" @(item.Add==true?"checked":"") /></td>
            <td><input id="@(item.Func_Code + "E")" type="checkbox" value="Edit" @(item.Edit==true?"checked":"") /></td>
            <td><input id="@(item.Func_Code + "V")" type="checkbox" value="View" @(item.View==true?"checked":"")/></td>
            <td><input id="@(item.Func_Code + "D")" type="checkbox" value="Delete" @(item.Delete==true?"checked":"")/></td>
            <td><input id="@(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
            </tr>
        }
    </table>
</div>

I am trying to work around my last checkbox(All). My requirement is that when I check that "All" checkbox, the remaining checkboxes should be checked and when I uncheck "All" checkbox, the remaining checkboxes should be unchecked.

I am using following Jquery for this.

<script>
$('.CheckAll').on('change', function () {
    $(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not(".CheckAll")').on('change', function () {
    if (!this.checked) {
        $('.CheckAll').prop('checked', false);
    }

    //var checkedBoxes = $(this).closest('.grouprow').find('input:checkbox:not(".CheckAll"):checked');
    //if (checkedBoxes.length == 4) {
    //    $('.CheckAll').prop('checked', true);
    //}
});
</script>

Everything works fine, but when I uncheck any one of the checkbox in any row when all the remaining rows checkboxes are checked, the "All" checkbox for all the rows is unchecked. Any help?

how is it different from stackoverflow.com/questions/22146610/… — Arun P Johny
– Arun P Johny, Commented Mar 4, 2014 at 8:24

Anoop Joshi P · Accepted Answer · 2014-03-04 08:51:15Z

2

change the code like this

 $(document).ready(function () {
        $('.CheckAll').on('change', function () {
            $(this).parent().parent().find('input[type=checkbox]').prop('checked', this.checked);
        });
        $('table tr input:checkbox:not(".CheckAll")').on('change', function () {

            if (!this.checked) {
                $(this).parent().parent().find('.CheckAll').prop('checked', false);
            }

        });
    });

Because you are unchecking all the chackboxes that have the class "CheckAll". This code will uncheck only the closest checkbox.

fiddle

updated fiddle

edited Mar 4, 2014 at 8:51

answered Mar 4, 2014 at 8:00

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Santosh Over a year ago

no,its not working.i modified the code.The uncheck is not working(When i unchecked any one checkbox in a particular row,the "All" checkbox in that row is not unchecked).

Santosh Over a year ago

..Thanks buddy,it worked.But one case is still missing here.When i check all the checkboxes(one by one) in a particular row,the "All" checkbox for that row should be checked.

Anoop Joshi P Over a year ago

@Santosh can you create a fiddle for that? then i can help you

Santosh Over a year ago

Can you please check the jsfiddle(in the above comment)

Santosh Over a year ago

tried the updated fiddle..but couldnt understand about hidden checkbox.And also the when i check the first checkbox(which is under Function) only the "All" checkbox is checked.In my case i dont have any checkbox under "Function".i can check "Add","Edit","View","Delete" .is this purposeful change from your side?

Jai · Accepted Answer · 2014-03-04 08:02:12Z

0

I think you should check for the length:

if ($('.grouprow').find(':checked').length != $('.grouprow').find(':checkbox').length) {
    $('.CheckAll').prop('checked', false);
}

answered Mar 4, 2014 at 8:02

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

How to use checkall when checked one checkbox in JQuery

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related