Using multiple checks in gridview with Javascript.

[sapator]

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:

<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:

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;

}

}