Jquery Functions for operations on gridview with checkboxes

Hi all,

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">&nbsp;</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>&nbsp;</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>&nbsp;</td>
</tr>
</table>

From stackoverflow

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

• 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.

  fucntion 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.

  AlteredConcept : Thanks paintball. Do you know of a method i can use to access that checked rows columns on a button click event?

  Scott M. : in jquery you can access the elements parent rather easily, as well as an element's siblings in the DOM tree. To access an array of all the elements in the same , you can select the checkbox's parent's siblings. The code: $('checkbox').parent().siblings() will return an array of the elements in the same row as checkbox. From there you can do whatever you want to those elements.

• 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
  });
  

  AlteredConcept : I've tried using this but for some reason nothing is happening. i changed my checkbox control class to "checked" and added those two functions in, but It still allows me select multiple checkboxes in a gridview

• 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" />
  &nbsp;
  <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>