Hi,
line "$(column).hide();" == "$(table .ProjectGroupName).hide()"; which means under table all class name start with ProjectGroupName should go hide or show.
but in the html you have used "name" attribute instead of class attribute.that's why it is not working.
below is the full code solution:
Script Part:
$(document).ready(function() {
$("input[type=checkbox]").on('change', function() {
var column = "table ." + $(this).attr("name");
alert(column);
$(column).toggle();
});
});
<p>
<input type="checkbox" name="ProjectGroupName" checked="checked" />
ProjectGroupName
<input type="checkbox" name="ProjectName" />
ProjectName
<input type="checkbox" name="BugID" checked="checked" />
BugID
</p>
<table class="table table-striped table-bordered table-hover" cellspacing="0" rules="all"
border="1" id="ctl00_ContentPlaceHolder1_GridViewUserControlnew_grdUserControl"
style="border-collapse: collapse;">
<tr>
<th class="ProjectGroupName" scope="col">
<a>ProjectGroupName</a>
</th>
<th class="ProjectName" scope="col" >
<a>ProjectName</a>
</th>
<th class="BugID" scope="col" >
<a>BugID</a>
</th>
</tr>
<tr>
<td class="ProjectGroupName">
Test Group
</td>
<td class="ProjectName">
7.3
</td>
<td class="BugID">
36244
</td>
</tr>
<tr>
<td class="ProjectGroupName">
Test Group 2
</td>
<td class="ProjectName">
Interface 1.1
</td>
<td class="BugID">
3212
</td>
</tr>
<tr>
<td class="ProjectGroupName">
Team Management
</td>
<td class="ProjectName">
RR CE
</td>
<td class="BugID">
3232
</td>
</tr>
<tr>
<td class="ProjectGroupName">
Test Group 3
</td>
<td class="ProjectName">
Testing Project
</td>
<td class="BugID">
1
</td>
</tr>
</table>
Please vote!!!
Regards,
Sarita Singh