Creating Checkboxes that Behave Like Radio Buttons with jQuery

First, take a look at the demo page to see the final behavior. As you can see, you can only check one checkbox per row. As soon as you check the other checkbox, the first one gets deselected. You can also uncheck the selected checkbox again, something that wouldn't be possible if you'd use a radio button instead.

To see how this works, take a look at the code. First, the page contains a standard HTML table with rows and cells. Each cell contains a checkbox:

<table border="0" cellpadding="0" cellspacing="0" id="myTable">
<tr>
  <td>
    <input type="checkbox" />
  </td>
  <td>
    <input type="checkbox" />
  </td>
</tr>
<tr>
  <td>
    <input type="checkbox" />
  </td>
  <td>
    <input type="checkbox" />
  </td>
</tr>
... More rows here
</table>

While this is just a plain and clean HTML table, you could accomplish the same with an ASP.NET GridView as in the end it renders rows and cells similar to this.

To make the selection feature work, I used jQuery. At the top of the demo page you find a link to the jQuery library on the Google CDN. Right below that, you find the following code:

<script type="text/javascript">
  $(document).ready(function ()
  {
    $("#myTable input[type=checkbox]").click(function ()
    {
      if (this.checked)
      {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', false);
        this.checked = true;
      }
    });
  }); 
</script>

This code uses jQuery's document ready to hook up some code that fires when the page is done loading. The code then sets up a click handler for all checkboxes (in all rows) that it finds in the table with an id of myTable. The function that gets executed when you click one of the checkboxes first checks if the checkbox that got clicked (referred to with the this parameter) has just been checked by the user. If it hasn't, no code should be run as you should be able to uncheck the current item.

But if the item did get clicked, the code first unchecks all checkboxes in the current row. It does that with this code:

$(this).closest('tr').find('input[type=checkbox]').attr('checked', false);

In this code, $(this) converts the current checkbox to a jQuery matched set (with a single element in it) so you can execute further jQuery code. The closest method then walks up the DOM tree looking for the nearest <tr> element. This finds the parent table row of the current checkbox. The find method then walks down the Dom tree again, finding all checkboxes (including the one that you clicked). The checkboxes are then unchecked using the attr method by setting their checked attribute to false (e.g. unchecked). Finally, the current item gets checked again by setting its checked property again (you could also have used the attr method but since I already had a reference to the checkbox in the this parameter, using this.checked felt like the quickest way to do it.

And there you have it: checkboxes that behave somewhat like radio buttons, with only a few lines of code, all made possible by the power that the jQuery library gives you.