Need help with javascript unchecking of one checkbox unchecks the main checkbox
<p>I have a table that has a header with a checkbox in that row. The data gets dynamically added in the table with javascript. Now checking on the checkbox that is in the header row checks or unchecks all the checkboxes of all rows.. I have done it till here in the method <strong>"checkUncheck()"</strong>, i.e.:</p>

<pre><code>&lt;input type="checkbox" id="chkAppId" onclick="checkUncheck()"/&gt;
</code></pre>

<p>But now, suppose there are 10 records dynamically added in the table. I have checked the main checkbox in the header. After that, I uncheck one of the checkboxes, e.g.: on the 10th row, then the checkbox of the header must be unchecked....and if I check all of the 10 rows of checkboxes manually, then the checkbox of main header must be checked. This is something normally observed in Yahoo, gmail, etc...</p>

<p>One way would be to count the number of checked ones and compare it with the total number of rows, and if found equal, then check the main one; otherwise, uncheck the main one. But I can't figure out where to do that... not working!</p>

<p><strong>Update</strong></p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;title&gt;Checkbox puzzle&lt;/title&gt;&lt;/head&gt;

&lt;body&gt;
    &lt;input type="checkbox" id="chkAppId" onclick="checkUncheck()"/&gt;Main&lt;br/&gt;
    &lt;input type="checkbox" id="chkAppId1" onclick="check()"/&gt;chk1&lt;br/&gt;
    &lt;input type="checkbox" id="chkAppId2" onclick="check()"/&gt;chk2&lt;br/&gt;
    &lt;input type="checkbox" id="chkAppId3" onclick="check()"/&gt;chk3&lt;br/&gt;

  &lt;script type="text/javascript"&gt;
    function checkUncheck()
    {
        var totalRows = 4;
        if(document.getElementById("chkAppId").checked){
            checkedAll = true;
        }
        else{
            checkedAll = false;
        }

        for(i = 1; i&lt; totalRows; i++){
            document.getElementById("chkAppId"+i).checked = checkedAll;
        }
    }


    function check()
    {
        var totalRows = 4,count=0;
        for(i = 1; i&lt; totalRows; i++)   {
            if(document.getElementById("chkAppId"+i).checked){
                count= count+1;
            }
        }
        if(count ==totalRows - 1){
            //alert("check Main");
            document.getElementById("chkAppId").checked = true;
        }
        else
        {
            //alert("uncheck Main");
            document.getElementById("chkAppId").checked = false;
        }
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This would be a simpler version that can explain the purpose, for anyone else who may need to implement such things.</p>
