Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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.
 
// 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.
// 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 23:44pm
Comments
user 3008 at 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?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Try this code. Will help you.
$(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');        
    })
})
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Just give class to asp.net check boxes and it must work.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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.
$(".Child").find(":checkbox").prop("checked", true);
 
And do same for selecting and deselecting the Parent checkbox respectively.
 
$(".Parent").find(":checkbox").prop("checked", true);
$(".Parent").find(":checkbox").prop("checked", false);
 
hope this will help you.
  Permalink  
v2

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

  Print Answers RSS
0 OriginalGriff 304
1 Sergey Alexandrovich Kryukov 255
2 Shweta N Mishra 216
3 Maciej Los 210
4 PIEBALDconsult 184
0 OriginalGriff 7,660
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,586
3 Manas Bhardwaj 4,946
4 Maciej Los 4,665


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 5 Apr 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100