How can i change column size using javascript

Question

How can i (1) check header present in gridview through class name using JavaScript (2) if CheckBox present in header in GridView then change the column width,with the help of class name using JavaScript (3)if checkbox not present in header then change column width with the help of class name using Javascript.

 

 Here is code:

<asp:Panel ID="pnlGrid" runat="server" CssClass="Panel">//class name to check header present or not
<div class="container">
<div class="row">
<div class="span4">
<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="btnAdd_Click" CssClass="btn btn-primary" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click"
CssClass="btn" />
</div>
</div>
</div>
<asp:GridView ID="GrdVacancies" runat="server" AutoGenerateColumns="false"
OnRowCommand="GrdVacancies_RowCommand" CssClass="table table-bordered table-striped table-hover" AllowPaging="true" OnPageIndexChanging="GrdVacancies_PageIndexChanging" PageSize="10"
AllowSorting="true" OnSorting="GrdVacancies_Sorting"> //class name to set column width when checkbox present in header
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkParent" runat="server" Text="" onclick="javascript:Check_Click(this);"
Style="float: left" ClientIDMode="Static" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="hfRowCId" runat="server" Value='<%# Eval("ID")%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="Vacancy" HeaderText="Vacancy">
<ItemTemplate>
<asp:LinkButton ID="lnkVacancyName" runat="server" Text='<%# Eval("Vacancy")%>' CommandArgument='<%# Eval("ID")%>'
CommandName="Edit2"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="JobTitle" HeaderText="Job Title">
<ItemTemplate>
<asp:HiddenField ID="hf_JobTitleID" runat="server" Value='<%# Eval("JobTitleID")%>' />
<asp:Label ID="itemJobTitle" runat="server" Text='<%# Eval("JobTitle")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="HiringManager" HeaderText="Hiring Manager">
<ItemTemplate>
<asp:HiddenField ID="hf_MgrID" runat="server" Value='<%# Eval("HiringManagerID")%>' />
<asp:Label ID="itemHiringMgr" runat="server" Text='<%# Eval("HiringManager")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="Status" HeaderText="Status">
<ItemTemplate>
<asp:Label ID="itemStatus" runat="server" Text='<%# Eval("Status")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<asp:Label ID="lblEmpty" runat="server" Text="No Record(s) found"></asp:Label>
</EmptyDataTemplate>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="CheckAllEmp();return false;" />
</asp:Panel> 

 

 

JavaScript code:

 

<script type="text/javascript">
function myFunction() {
var GridVwHeaderChckbox = document.getElementById("myDIV").className = "Panel";
debugger;
var Inputs = document.getElementsByTagName('input');
var chkBox = "chkParent";
debugger;
for (var n = 0; n < Inputs.length; ++n)
if (Inputs[n].type == 'checkbox' &&
Inputs[n].id.indexOf(chkBox, 0) >= 0 && Inputs[n].checked)

debugger;
return true;
}
</script>