Check/Uncheck All CheckBoxes using Jquery

Question

4.00/5 (1 vote)

See more:

Hi,
How to check/uncheck checkboxes(Child) using a single(Parent) checkbox or vice-versa?
When i am using normal Html checkbox following code is working.
where Child and Parent are classes given to checkboxes.

C#

// add multiple Check / Uncheck functionality
    $(".Parent").click(function () {
          $(".Child").attr("checked", this.checked);
    });

    // if all child checkbox are selected, check the Parent checkbox
    // and viceversa
    $(".Child").click(function(){

        if($(".Child").length == $(".Child:checked").length) {
            $(".Parent").attr("checked", "checked");
        } else {
            $(".Parent").removeAttr("checked");
        }
  });

But when i am using asp.net checkboxes this code is not working.
then i have modified the code as below.

C#

// add multiple Check / Uncheck functionality
  //Parent class is having only one checkbox 
$(".Parent:first-child").click(
function() {
          $(".Child").find(":checkbox").attr("checked", this.checked);
    });

    // if all child checkbox are selected, check the Parent checkbox
    // and viceversa
    $(".Child").find(":checkbox").click(function(){

        if($(".Child").length == $(".Child:checked").length) {
            $(".Parent").find(":checkbox").attr("checked", "checked");
        } else {
            $(".Parent").find(":checkbox").removeAttr("checked");
        }
  });

Is this Because of Span Rendering Problem?
How to Solve this Problem?

Thanks in Advance.

Posted 25-Jun-12 22:44pm

vikas.pawar143

Add a Solution

Comments

user 3008 26-May-14 0:49am

Here the checkboxes have parent child relationship thus you have give as traversing.If suppose the two checkboxes do not have parentchild relationship and are two different checkboxes with different class name and Id then how can we give the click function?

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prashant Trambake · Answer 1 · 2012-06-25T23:17:00

Try this code. Will help you.

JavaScript

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all')
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

Vikram Bhatt · Answer 2 · 2012-06-27T07:29:00

Solution 2

Just give class to asp.net check boxes and it must work.

Posted 27-Jun-12 7:29am

Vikram Bhatt

DotNet WeblineIndia · Answer 3 · 2014-04-04T20:37:00

You are doing nothing wrong, but you should always use 'prop()' instead of 'attr()' when you are dealing with such check & uncheck.

Please modified your code and use prop() in place of attr() for selecting all checkbox having class child.

JavaScript

$(".Child").find(":checkbox").prop("checked", true);

And do same for selecting and deselecting the Parent checkbox respectively.

JavaScript

$(".Parent").find(":checkbox").prop("checked", true);
$(".Parent").find(":checkbox").prop("checked", false);

hope this will help you.

Check/Uncheck All CheckBoxes using Jquery

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0