Question

javascript(jquery)

$('.ic_parent').change(function(){
  var id = $(this).attr('value')
  while (id.length >0){
    if ($(this).attr('checked')) {
      $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').attr('checked', $(this).attr('checked'));
    }else{
      $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').removeAttr('checked');
    }
    id = $('#update_ics_table').find('input:checkbox[id = "child-of-' + id + '"]').attr('value')
  }
});

I have this treetable and would like to have cascade checkbox select.

When I click on the root its suppose to click all the children like so

root(selected)
  --child1(selected)
    -----subchild1(selected)
    -----subchild2(selected)
    -----subchild3(selected)
  --child2(selected)
    -----subchild1(selected)
    -----subchild2(selected)

My current code doesn’t check the subchild1 and 2 for the child2

How would I modify my code so that this is possible?

SOLVED:

Ok this hopefully helps people who came across this post hoping to implement such treetable. F. Calderan pointed out a good code but it was only doing half the job as if you click a parent instead of grandparent, nothing happens.

$('.blah).live('change',function(){
  var id = $(this).attr('value')
  var state = $(this).attr('checked')
  var plat = $(this).attr('platform')
  child_checker = $('#update_cycles_table').find('input:checkbox[key ^= "child-of-' + id + '_'+plat+'"]').attr('checked')
  if (child_checker == "checked"){
    $(this).removeAttr('checked')
  }
  while (id.length >0){
    if (state){
      $('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').attr('checked', 'checked')    
    }else{
      $('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').removeAttr('checked');
    }
  id=($('#update_cycles_table').find('input:checkbox['+key+' ^= "child-of-' + id + '_'+plat+'"]').attr('value'));
  }
});

you also need a childcheck to makesure that when you click middle of the tree, the top also gets unchecked. Without the checker it will not recognize that the checkbox was not check and will not perform anything.

Answer 1

I would recommend not depending on IDs and the like to accomplish this behaviour. If you use HTML to properly describe the structure, it is easy to pick out the right elements in jQuery.

I made a quick example at http://jsfiddle.net/jRAcq/