A while back I found the need to have HTML checkboxes behave like radio buttons. As you probably know, the main difference between the two is that multiple checkboxes can be selected at the same time whereas only one radio button can be selected at any given time (of course this changes depending on the context).
So how do you make checkboxes behave like radio buttons? With a bit of Javascript, it's pretty easy (click "Result" to see it in action):
As you can see, only one checkbox can be selected at a time; the checkboxes are behaving like radio buttons! This solution allows you to leave both boxes unchecked, or check only one.
cool! May have to use this on a website.
Also, I started playing with the boxes before reading the post. doh!
Short, sweet and very functional… Thanks!
You’re welcome, Rob! Glad to hear you found this useful, and thanks for stopping by!
Its is fine! but it will be too complecated when more than two checkboxes!
You’re correct, Raja. The method I described would require you to add additional Javascript code to uncheck all other check boxes. If I was going to use more than one checkbox, I’d probably write a function that searches for checkboxes containing a particular id tag and then unchecks them. That way the code could be changed to
if(this.checked) {uncheck_others();}You can do it easily using jQuery:
http://web3o.blogspot.com/2009/11/making-checkboxes-behave-like-radio.html
Thanks for the tip, Abhinay!
This is the best solution I have found for this.
So many other overly complicated efforts to do this same thing.
Elegant, effective and yet simple.
Excellent and thanks for posting it !!!
You’re most welcome! 🙂
FANTASTICO!!.. I’ve been looking for this script a week ago.. finally found this!!.. thanks for posting
Glad I could help! 🙂
Hi good one Ram i would like to hide some controls with the same functionality how can i means if first check box is checked i would like to show some controls and on checking 2nd i would like to unchecked first which works but at the same time i would like to make the visibility of control to false can you help me
Hi Dorababu,
I suggest you look into using CSS to hide and show DIVs that contain your controls.
Mierda, que vaina que ta’ apera
Nice 🙂
I was trying to do this with Jquery but oh well… lol…
Hi
I want to use this checkbox in Gridview
I copied ur code but it is not working can you please tell me how to use in the girdview
Hi Sandy,
Unfortunately I’m not familiar with Gridview, so I’m not sure how to help.
Is it problem of my computer or chrome does not support this? I can have both checked…. 🙁
It appears that the
id=""attribute is required now. I’ve updated the code sample above to reflect this change and it’s now working in Chrome.Thanks for pointing that out!
Thanks a lot, its good to make things possible when they are not meant to 🙂
plz i want the code for more than 1 checkbox say around 10, if one clicked others should disable and unchecked it shud be enabled….plz help…….if can send the code to my mail
Hi Nishu,
I recommend posting your question on stackoverflow.com.
Thanks , this perfect
Glad you enjoyed it, Mohamed! 🙂
thankyou
You’re welcome, Eleazar!
OMG!! THANK YOU SO MUCH FOR THIS!!! SAVE MY LIFE! THE PERFECT SOLUTION!!!
You’re most welcome, Larissa. I’m glad this helped you!
Hi. It doesn’t seem to work on iPad Safari. I can select both buttons.
Hi Gillian,
Thanks for letting me know. It looks like an update broke the code that I had on that page. I’ve updated it in the post and have tested it on my iPad with Safari to confirm that it’s working as expected. I hope this helps!
What if its name attribute in array format? for example like this
name=”food_habits[great_sweet_need][]”
Hi Javed,
I recommend posting your question on stackoverflow.com.