jQuery help with checking parent of checked child checkbox

Question

I have a main row and some other rows underneath that main row like this:

[checkbox]  Main heading row  
            [checkbox] first child row  
            [checkbox] second  child row  

When I click on the child row, it should check the parent (main) row automatically. Problem is that it doesn't check it first time I click it. I have to check the first child row first, then uncheck the first child row and then check first child row again to get the parent (main) row get checked. I want the parent row get checked as soon as any of the child rows get checked.

I am using the following code

function checkbox_click(){

  var n = event.srcElement;
  if(n.parentElement.id == "row"){
   n = n.parentElement;
  }
  if(n.id == "row"){
   alert("ID: 1");
   n.rs = n.parentElement;
   if(this.multiSelect == 0){ // single select
    alert("ID: 2");
    n.all[0].checked = 1;
    this.selectedRows = [ n ];
    if(this.lastClicked && this.lastClicked != n){
     this.lastClicked.all[0].checked = 0;
     this.lastClicked.style.color = "000099";
     this.lastClicked.style.backgroundColor = "";
    }
   } else {
    alert("ID: 3");
    n.all[0].click();


   }
   if(this.parentElement == pg.procs) {
    alert("ID: 4");
    var terminate = false;
    var counter = 0;
   if(n.className == "proc") {
    alert("ID: 5");
     z = n.nextSibling;


     while(z.id == "row" && z.className != "proc" && !terminate) {
      alert("ID: 6");
      z.all[0].checked = 0;
      z.style.backgroundColor = z.className == "w" ? "ffffff" : "ffffcc";
      counter++;
      if(counter > 1000) terminate = true;
      z = z.nextSibling;
     }
    } else {


     $(".row input").change(function() {
      alert("ID: 7");
         var $row= $(this).closest(".row");
         var $main_row = $row.prev('.proc').length ? $row.prev('.proc') : $row.prevUntil(".proc").prev();
         $main_row.find(":checkbox").attr("checked", function(i,attr) {
             return $main_row.nextUntil('.proc').filter(':has(input:checked)').length ? "checked" : false;
         });
     });

     $(".proc input").change(function() {
      alert("ID: 8");

         $(this).closest(".proc").nextUntil('.proc').children(':checkbox').attr('checked', this.checked);
     });

    }

Answer 1

If you want to check the parent checkbox when one of the child checkboxes is checked, I would suggest using a common class for the child checkboxes, and a unique id attribute for the parent checkbox (or store it as a variable).

Let's assume you have a structured HTML document that contains something like the following:

<div>
    <input type="checkbox" name="ckparent" id="ckparent" />
    <label for="ckparent">Parent</label>

    <div>
        <input type="checkbox" name="ckchild1" id="ckchild1" class="ckchild" />
        <label for="ckchild1">Child 1</label>
    </div>

    <div>
        <input type="checkbox" name="ckchild2" id="ckchild2" class="ckchild" />
        <label for="ckchild2">Child 2</label>
    </div>
</div>

You could then write the following jQuery code to check the parent checkbox when either of the children are checked:

$('input:checkbox.ckchild').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $('#ckparent').attr('checked', true);
    }
});

EDIT: The order in which the changed and clicked events are fired with regards to when the checked attribute is actually changed is dependent on the browser you are using -- which browsers are you targeting?