javascript - How to checkuncheck all asp.net checkbox on single checkbox event? - Stack Overflow

admin管理员组

文章数量:1026989

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

As my checkboxes are asp 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
}

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

As my checkboxes are asp 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
}

• javascript
• c#
• jquery
• asp
• checkbox

Share Improve this question Follow edited May 26, 2019 at 9:55 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 11, 2015 at 3:27 I Love StackoverflowI Love Stackoverflow 6,8682222 gold badges114114 silver badges238238 bronze badges 4

• 2 Give mon class for check all checkbox and use it as $('.checkAll').on('change', function() { $(this).closest('div').find(':checkbox').prop('checked', this.checked);}); – Tushar Commented Dec 11, 2015 at 3:31
• Possible duplicate of CheckAll CheckBox Jquery – sujith karivelil Commented Dec 11, 2015 at 3:32
• @Tushar:but what is i want to use control id instead of class then – I Love Stackoverflow Commented Dec 11, 2015 at 3:35
• @Learning use $('[id^=chkParent]).on('change', function` – Tushar Commented Dec 11, 2015 at 3:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 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.

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).

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

As my checkboxes are asp 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
}

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

As my checkboxes are asp 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
}

• javascript
• c#
• jquery
• asp
• checkbox

Share Improve this question Follow edited May 26, 2019 at 9:55 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 11, 2015 at 3:27 I Love StackoverflowI Love Stackoverflow 6,8682222 gold badges114114 silver badges238238 bronze badges 4

• 2 Give mon class for check all checkbox and use it as $('.checkAll').on('change', function() { $(this).closest('div').find(':checkbox').prop('checked', this.checked);}); – Tushar Commented Dec 11, 2015 at 3:31
• Possible duplicate of CheckAll CheckBox Jquery – sujith karivelil Commented Dec 11, 2015 at 3:32
• @Tushar:but what is i want to use control id instead of class then – I Love Stackoverflow Commented Dec 11, 2015 at 3:35
• @Learning use $('[id^=chkParent]).on('change', function` – Tushar Commented Dec 11, 2015 at 3:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 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.

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).

本文标签： javascriptHow to checkuncheck all aspnet checkbox on single checkbox eventStack Overflow