jQuery help with checking parent of checked child checkbox
<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>
