Creating Checkboxes that Behave Like Radio Buttons with jQuery
Some time ago I received a question on the Wrox P2P forum about checkboxes that should behave like radio buttons. The poster of the question was looking for a (client side) solution to have multiple checkboxes per row in a GridView with multiple rows. A user should only be able to check off at most one of the checkboxes in each row. My first thought was to use radio buttons instead, but then I realized that with radio buttons you lose the ability to uncheck all options. Once you've selected a radio button in a group of radio buttons, there's no way for an end user to uncheck it again.
Fortunately, with a bit of jQuery, this is really simple to accomplish with checkboxes as I'll show you in this short article.
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:
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:
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.
Where to Next?
Wonder where to go next? You can post a comment on this article.
Links in this Document
Talk Back! Comment on Imar.Spaanjaars.Com
I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.
When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.
If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.
Please correct the following errors:
Unfortunately, something went wrong and your message or comments have not been submitted successfully.
There's a fair chance things broke down because you tried to post something that looks like HTML. Things that look like HTML include (X)HTML, obviously, XML, ASP.NET markup and c# generics syntax as all of them use the < and > characters.
If that's the case, try altering your message and remove anything that looks like an angled bracket. You can replace them with [ and ] for example so you can still make it look like HTML to some extend.
If, on the other hand, you were trying to spam this web site, I am pretty glad I caught you in the act and stopped you from doing so ;-)
Also, please don't use links in your posts; I had to block them to filter out most of the junk mail I am receiving.