Why not use actual radio buttons? Using checkboxes as radio buttons is going to confuse the hell out of your users.
Commented Jan 15, 2011 at 4:10 I could dress my dog like a cat, but wouldn't it be smarter to just get a cat? Commented Jan 15, 2011 at 4:11 @Phrogz: Was I not serious enough? :/ Commented Jan 15, 2011 at 4:14 thanks for the fair warnings! i know this is a terrible idea. I have no excuse. Commented Jan 15, 2011 at 4:27 @BoltClock One cannot uncheck a radio button unlike a checkbox. Commented Dec 6, 2016 at 11:25$("input:checkbox").click(function()< var group = "input:checkbox[name='"+$(this).attr("name")+"']"; $(group).attr("checked",false); $(this).attr("checked",true); >); This will do it, although i do agree this might be a bad idea.
UPDATE added group separation.
answered Jan 15, 2011 at 4:12 amosrivera amosrivera 26.5k 9 9 gold badges 68 68 silver badges 76 76 bronze badges Make it "input.radio:checkbox" and you've got a deal. Commented Jan 15, 2011 at 4:13this works, almost, the only part that does not work in the example is the fact that the names of the checkbox groups are different. In your code all the checkboxes on the page are affected, rather than those in a specific set.
Commented Jan 15, 2011 at 4:17no because that would still not work, if you notice the name, he's got 2 groups, you've got it acting as one big group
Commented Jan 15, 2011 at 4:17I had to add .not(this) to the group to get it working in my case - although I did hardcode in the name values to target a specific checkbox group: http://jsfiddle.net/C3nw4/1/
Commented Jul 10, 2014 at 18:38 doesn't work with newer jQuery, use prop instead attr Commented Aug 14, 2014 at 22:47If you apply class to the checkbox, you can easily achieve the radio button functionality using the following piece of code:
$(".make_radio").click(function()< $(".make_radio").not(this).attr("checked",false); >); Updated for Jquery 1.9 - use .prop() instead of .attr()
$("input:checkbox").click(function()< var group = "input:checkbox[name='"+$(this).prop("name")+"']"; $(group).prop("checked",false); $(this).prop("checked",true); >); Updated the script (via answer from Tomislav) so you also can uncheck ALL checkboxes. Just added a .not(this) and removed the line where the the current checkbox is checked.
$('form').each(function() < // iterate forms var $this = $(this); $this.find('input:checkbox').click(function() < var group = 'input:checkbox[name="' + $(this).attr('name') + '"]'; $this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change >); >); Perhaps you want to consider a different approach. I believe you want to style the radio button to look like a checkbox. If so, see: this google search
And below is a simplified example that I borrow from www.thecssninja.com.
To put it simply: you hide the actual radio button (see the css input[type=radio]) and you style the label for the corresponding radio button to show the custom checkbox (from the css sprite in the background image in input[type=radio] + label) and switch to a different sprite in the background when the radio button is in checked state. Running example here: http://jsfiddle.net/jchandra/R5LEe/
Custom CSS3 control facade label < padding: 0 0 0 24px; >input[type=radio] < padding:0; margin:0; width:16px; height:16px; position:absolute; left:0; opacity:0 >input[type=radio] + label < background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat; width:50px; height:16px; >input[type=radio]:checked + label Custom control images and concept from www.thecssninja.com