How to check/uncheck all asp.net checkbox on single checkbox event?

Question

I have one checkbox name Select All on which I want to check/uncheck all my checkbox div wise.

As my checkboxes are asp.net controls that is runat=server so I am not getting how to handle it on client side.

This is my code:

<asp:CheckBox onchange="Checkallcheckbox()" ID="chkAll" runat="server" Text="Parent" /> -- parent of all checkboxes.

---------Section 1 -----------
<div id="section1">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent1" runat="server" Text="Check All" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild1" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild2" runat="server" Text="Child 2" />
    </li>                                
</div>

---------Section 2 -----------
<div id="section2">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent2" runat="server" Text="Check all" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild3" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild4" runat="server" Text="Child 2" />
    </li>                                
</div>

function Checkallcheckbox() {
    // How to check/uncheck all checkbox on this event
}

Give common class for check all checkbox and use it as $('.checkAll').on('change', function() { $(this).closest('div').find(':checkbox').prop('checked', this.checked);}); — Tushar
– Tushar, Commented Dec 11, 2015 at 3:31
@Tushar:but what is i want to use control id instead of class then — I Love Stackoverflow
– I Love Stackoverflow, Commented Dec 11, 2015 at 3:35

AiApaec · Accepted Answer · 2015-12-12 06:14:15Z

2

In ASP.NET (Webforms) when you use a server control like this:

<asp:CheckBox ID="chkAll" runat="server" Text="Parent" />

It's rendered on the client like this:

<span id="somprefix_chkAll">
  <input type="checkbox" />
</span>

So if you if you are using $("#<%= chkAll.ClientID %>") in your javascript then you really are waiting for the event of that span element (id="somprefix_chkAll") but the event never will be triggered since the change event is applied only for input elements (see jQuery doc.).

But you can solve your problem easily, you can use a plain html control in asp.net and also it can be a server control (through the attribute: runat="server"), it means that you'll have access to the control in the code behind. For example, you can use this:

<input type="checkbox" id="chkAll" runat="server" />

And in the code behind you can acces as always:

//assigning:
this.chkAll.Checked = true;
//get:
var isChecked = this.chkAll.Checked;

Considering the above let me change your code:

function Checkallcheckbox(currentClickedCheckbox) {

	var section1Chks= $('#section1').find(':checkbox');
	var section2Chks= $('#section2').find(':checkbox');
	
	if($(currentClickedCheckbox).is(':checked')) {
		section1Chks.prop('checked', true);
		section2Chks.prop('checked', true);
	} else {
		section1Chks.prop('checked', false);
		section2Chks.prop('checked', false);
	}
}

function CheckAllInSection(currentClickedCheckbox) {
	var $currentChk = $(currentClickedCheckbox);
	var sectionChks= $currentChk.closest('div').find(':checkbox');
	var checkAll = $currentChk.is(':checked');
  sectionChks.prop('checked', checkAll);

}

<input type="checkbox" id="chkAll" onchange="Checkallcheckbox(this)"   runat="server" value="Parent" />
<br />
---------Section 1 -----------
<div id="section1">
    <li class="carousel-border">
	<input type="checkbox" id="chkParent1" runat="server" onchange="CheckAllInSection(this)" value="Check All" />
    </li>
    <li>
        <input type="checkbox" id="chkchild1" runat="server" value="Child 1" />
    </li>
    <li>
        <input type="checkbox" id="chkchild2" runat="server" value="Child 2" />
    </li>                                
</div>

---------Section 2 -----------
<div id="section2">
    <li class="carousel-border">
        <input type="checkbox" id="chkParent2" runat="server" onchange="CheckAllInSection(this)" value="Check All" />
    </li>
    <li>
        <input type="checkbox" id="chkchild3" runat="server" value="Child 3" />
    </li>
    <li>
        <input type="checkbox" id="chkchild4" runat="server" value="Child 4" />
    </li>                                
</div>

See the JSFiddle Demo.

edited Dec 12, 2015 at 6:14

answered Dec 12, 2015 at 5:52

AiApaec

6701 gold badge6 silver badges12 bronze badges

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

6 Comments

I Love Stackoverflow Over a year ago

your explaination is superb and 100% correct but you havent done anything on parent checkbox selection(for section1 chkparent1 and section 2 chkparent2)

I Love Stackoverflow Over a year ago

setting input type=checkbox and runat=server so everything would be same right on server side?

AiApaec Over a year ago

Yes, in most cases. See in the MSDN: "CheckBox Web Server Control" and "HtmlInputCheckBox Server Control".

I Love Stackoverflow Over a year ago

just wanted to ask you 1 thing that how to uncheck this all checkbox on page load that is through property or in document.ready?

AiApaec Over a year ago

through property in code behind: chk1.Checked=false; chk2.Checked = false; an so on... In document ready with this line: var chks = $("form").find(':checkbox'); chks.prop('checked', false);

|

Yeldar Kurmangaliyev · Accepted Answer · 2015-12-11 03:48:38Z

2

Give them corresponding class names to make it possible to select them.
Then, you will be able to do this with a single selector:

<asp:CheckBox ID="chkAll" runat="server" Text="Parent" />

<div id="section1" class="section">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent1" Class="chkParent" runat="server" Text="Check All" /> --Parent of below 2 checkboxes
    </li>
    <li>
        <asp:CheckBox ID="chkchild1" Class="chkChild" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild2" Class="chkChild" runat="server" Text="Child 2" />
    </li>                                
</div>

<div id="section2" class="section">
    <li class="carousel-border">
        <asp:CheckBox ID="chkParent2" Class="chkParent" runat="server" Text="Check all" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild3" Class="chkChild" runat="server" Text="Child 1" />
    </li>
    <li>
        <asp:CheckBox ID="chkchild4" Class="chkChild" runat="server" Text="Child 2" />
    </li>                                
</div>

Now, in your JS you can attach change handlers:

$(document).ready(function() {
    var $chkAll = $("#<%= chkAll.ClientID %>");

    $chkAll.change(function() {
        $(".chkParent, .chkChild").prop('checked', this.checked);
    });

    $(".chkParent").change(function() {
        $(this).closest('.section').find('.chkChild').prop('checked', this.checked);
    });
});

You may also want to add the following handler:

  $(".chkChild, .chkParent").change(function() {
      var allCheckedInGroup =  $(this).closest('.section').find('.chkChild:not(:checked)').length === 0;
      $(this).closest('.section').find('.chkParent').prop('checked', allCheckedInGroup);

      var allChecked = $(".chkParent:not(:checked)").length === 0;
      $chkAll.prop('checked', allChecked);
  });

in order to make changes reflect into "Select All" checkboxes. Try to click something and will understand it.

Here is the working JSFiddle demo (without ASP.NET).

edited Dec 11, 2015 at 3:48

answered Dec 11, 2015 at 3:37

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

6 Comments

I Love Stackoverflow Over a year ago

you cant use $("#chkAll") this like because its not a html control.its an asp.net control.so this event wont fire like this

Yeldar Kurmangaliyev Over a year ago

@Learning Oh, you are right. I have updated my answer.

I Love Stackoverflow Over a year ago

Thank you so much for the answer.It worked but i am getting one problem so could you please help me

AiApaec Over a year ago

take care. asp:CheckBox is rendered as a span with a checkbox inside so chkAll will be part of the span element. But yo can use <input type=checkbox" runat="server" id="chkAll" ...

I Love Stackoverflow Over a year ago

@AiApaec:I am unable to fire chkall event due to 1 issue.so can you please help me with that.

|

Collectives™ on Stack Overflow

How to check/uncheck all asp.net checkbox on single checkbox event?

2 Answers 2

6 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related