Friday, November 13, 2009

Making Checkboxes behave like Radio Buttons using jQuery

Sometimes you might need Checkboxes to behave like Radio Buttons on your webpage because you may only want zero or one selection from a category of choices. You cannot select 0 or 1 choice from a Radio Button Group because Radio Button groups are meant to select only one choice from a group.

I have written an easy to use and understand code in jQuery for achieving this task. In this example, all the checkboxes with name Colors are assigned a click function (Checkbox_to_RadioButton()) when the page loads for the first time. The Checkbox_to_RadioButton() is a generic function which will automatically uncheck all other other checkboxes with the same name/group.

Too make this work on your page, you just need to paste this JavaScript code in the head section of your webpage and set the Checkbox group name in the page ready function.

JavaScript Code:
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('input:checkbox[name=Colors]').click(function(){
            Checkbox_to_RadioButton(this);
      });
});
function Checkbox_to_RadioButton(box){
      $('input:checkbox[name=' + box.name + ']').each(function(){
            if (this != box) $(this).attr('checked', false);
      });
}
</script>

HTML Code:
<input type="checkbox" name="Colors" value="Red" />Red<br />
<input type="checkbox" name="Colors" value="Blue" />Blue<br />
<input type="checkbox" name="Colors" value="Green" />Green<br />
<input type="checkbox" name="Colors" value="Yellow" />Yellow<br />

7 comments:

  1. Thanx. I was looking for this. Good work :)

    ReplyDelete
    Replies
    1. Not working , can you tell me what I am doing wrong. I have display tag, records will be loaded dynamically and each record will have check box. I have used same code by replacing the name of the check box. Seriosly looking for this functionality.

      Appreciate your help.

      Delete
  2. Anonymous, looks like you are assigning the click event before all your checkboxes are loaded. Try jQuery Live (http://api.jquery.com/live/) functionality to attach click events.

    ReplyDelete
  3. There's nothing wrong with the code. The path of jQuery UI is not found. Instead, change it to --> http://code.jquery.com/jquery-1.8.3.js

    ReplyDelete
  4. Thanks for code. It doesn't work when you have multiple "sets" (or even individual sets) of checkboxes (each having their own 'name'), it simply deselects everything that is not the current checkbox being checked. To make this work within the context of the current "set", the code should change to only disable within the same set/group:

    function DeselectOtherCheckboxes(box) {
    $('input:checkbox[name=' + box.name + ']').each(function () {
    if (this.name === box.name && this !== box) {
    $(this).attr('checked', false);
    }
    });
    }

    ReplyDelete
    Replies
    1. Actually there is no need to narrow down with the IF condition. The problem is actually with the selector itself. It needs quotes to actually filter. I'm using double quotes but it should work with single quotes too (escape it with the slash \ )

      Instead of: $('input:checkbox[name="' + box.name + '"]')
      It should be: $('input:checkbox[name="' + box.name + '"]')

      Delete

Thanks a lot for your valuable comments :)