Jquery Functions for operations on gridview with checkboxes - asp.net

Question

The first column in my gridview (gvAvailable) is a currently checkbox column "chkSelect".
The way it works now is that a user can check multiple checkboxes on a gridview, but I would like a jquery function to deselect all the checkboxes on the gridview except for the checkbox that was clicked.
I was also looking for a way to access the columns of the checked row with jquery on a button click.
Thanks for any help
Here's how the generated html looks
<table class="Grid" cellspacing="0" border="0" id="gvAvailable" style="width:99%;border-collapse:collapse;">
<tr class="GridHeader">
<th scope="col"> </th><th scope="col">Guid</th><th scope="col">Id</th><th scope="col">Name</th>
<th scope="col">Facility</th><th scope="col">Room</th>
</tr>
<tr class="GridItem">
<td>
<input id="gvAvailable_ctl02_chkSelect" type="checkbox" name="gvAvailable$ctl02$chkSelect" />
</td>
<td>24</td>
<td>000101020201</td>
<td>Test</td>
<td>Test Facility</td>
<td> </td>
</tr><tr class="GridAltItem">
<td>
<input id="gvAvailable_ctl03_chkSelect" type="checkbox" name="gvAvailable$ctl03$chkSelect" />
</td>
<td>25</td>
<td>1001</td>
<td>Test 2</td>
<td>Test 3</td>
<td> </td>
</tr>
</table>

Answer 1

if you add the same class to each of the checkboxes in the markup, you can retrieve an array of them by saying
$('.classname')
This will give you back the array of objects. You can then call 'each' on the array and deselect them all.
function removeChecks()
{
$('.classname').each(function()
{
$(this).removeAttr('checked');
});
}
Then add the above function call in the click handler for the each checkbox:
$('.classname').each(function()
{
$(this).click(function()
{
removeChecks();
$(this).attr('checked', 'checked');
});
});
the code above should be set up to run on page load.

Answer 2

In this example I put one button to check, and one button to uncheck gridview checkboxes :
<asp:GridView runat="server" ID="grid"></asp:GridView>
<input type="button" onclick="uncheckCheckBoxes()" value="UnCheck" />
<input type="button" onclick="checkCheckBoxes()" value="Check" />
<script>
function uncheckCheckBoxes()
{
var gridClientID = '<%= grid.ClientID %>';
jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
{
this.checked = false;
});
}
function checkCheckBoxes()
{
var gridClientID = '<%= grid.ClientID %>';
jQuery.each($("#" + gridClientID + " input[type='checkbox']"), function ()
{
this.checked = true;
});
}
</script>

Answer 3

I am assuming you would like to make sure the user clicked checkboxes do not get toggled? If so, go on below.
First, just give a class name to all checkboxes in the gridview.
Whenever a checkbox was clicked, add another class to it to denote it was physically selected.
$('.checkbox').click(function(){
$(this).addClass('checked');
});
Now, when a user clicks on the select all checkbox (let's call it "selectAll") on top, iterate through all the checkboxes and toggle the status while checking the "checked" class
$('#selectAll').click(function(){
var status = $(this).attr('checked')
$('.checkbox').each(function(){
//only toggle if not set
if(!$(this).hasClass('checked')){
if(status){
$(this).attr('checked', 'checked');
}
else{
$(this).attr('checked', '');
}
}
});
});
This should get you along your merry way hopefully.
Now, accessing columns of the checked row?
You could add an onclick event to each table row.
$('#tablename tr').click(function(){
//do something
});

Answer 4

i found this articale very usefull Check/Uncheck all Items in an ASP.NET CheckBox List using jQuery