Using multiple checks in gridview with Javascript.

Ok since i see this question asked a lot of times i will put it here for future reference.
So how would you create a column of checkboxes that will be checked and unchecked accordingly and also check all the checkboxes with one click.

Use something like this on the gridview:

Code:

---

  <Columns> .......etc
                <asp:TemplateField>
                    <HeaderTemplate>
                       
                        <input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"  runat="server" type="checkbox" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="ChkboxUn" runat="Server" />
                    </ItemTemplate>
                </asp:TemplateField>   
                  <asp:TemplateField>
            <HeaderTemplate>
.....etc  </Columns>

---

Then on the js function write:

Code:

---

function SelectAllCheckboxes(spanChk) {
     
        var oItem = spanChk.children;

        var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0];

        xState = theBox.checked;

        elm = theBox.form.elements;

        for (i = 0; i < elm.length; i++)

            if (elm[i].type == "checkbox" && elm[i].id != theBox.id) {

            //elm[i].click();

            if (elm[i].checked != xState)

                elm[i].click();

            //elm[i].checked=xState;

        }

    }

---