title: jQuery help with checking parent of checked child checkbox
body: <p>I have a main row and some other rows underneath that main row like this:</p>
  
  <pre><code>[checkbox]  Main heading row  
              [checkbox] first child row  
              [checkbox] second  child row  
  </code></pre>
  
  <p>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.</p>
  
  <p>I am using the following code</p>
  
  <pre><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 &amp;&amp; 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" &amp;&amp; z.className != "proc" &amp;&amp; !terminate) {
        alert("ID: 6");
        z.all[0].checked = 0;
        z.style.backgroundColor = z.className == "w" ? "ffffff" : "ffffcc";
        counter++;
        if(counter &gt; 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);
       });
  
      }
  </code></pre>