Make the radio buttons behave like single-choice checkboxes

Make the radio buttons behave like single-choice checkboxes

If you a web developer, maybe you encountered this annoying thing.

Let’s say you need to write a list of choices, i.e. questions – answers. Let’s define that all the questions are optional and you can select just one answer per question. The way you should implement it, is using inputs with radio type, that’s fine and this how it should be.
Example code is:

<form method="post">

<h4>What is favorite time?</h4>
<label><input name="question1" type="radio" value="morning"> Morning</label>
<label><input name="question1" type="radio" value="noon"> Noon</label>
<label><input name="question1" type="radio" value="evening"> Evening</label>

<h4>What is your preferable paying method?</h4>
<label><input name="question2" type="radio" value="cc"> Credit Card</label>
<label><input name="question2" type="radio" value="check"> Check</label>
<label><input name="question2" type="radio" value="paypal"> Paypal</label>
<label><input name="question2" type="radio" value="cash"> Cash</label>

</form>

But, as I said, the questions are optional. What’s happening now is when I check an option, I cannot uncheck it anymore! A problem.

What is favorite time?



What is your preferable paying method?




Here, I will show you how to solve this problem.
There are two solutions to solve it, both involves JavaScript (and jQuery to ease the work):

  1. Convert all radio buttons to checkboxes:
<form method="post">

<h4>What is favorite time?</h4>
<label><input name="question1" type="checkbox" value="morning"> Morning</label>
<label><input name="question1" type="checkbox" value="noon"> Noon</label>
<label><input name="question1" type="checkbox" value="evening"> Evening</label>

<h4>What is your preferable paying method?</h4>
<label><input name="question2" type="checkbox" value="cc"> Credit Card</label>
<label><input name="question2" type="checkbox" value="check"> Check</label>
<label><input name="question2" type="checkbox" value="paypal"> Paypal</label>
<label><input name="question2" type="checkbox" value="cash"> Cash</label>

</form>

What is favorite time?



What is your preferable paying method?




As you can see, multiple checkboxes choice appeared when we just replaced the radio buttons with checkboxes.
Now, add this JavaScript code to the document:

$(document).ready(function(){
    $("input:checkbox").change(function(){
        $("input:checkbox[name='"+$(this).attr("name")+"']").not(this).prop("checked",false);
    });
});

Finally we’ve got the result with checkboxes:

What is favorite time?



What is your preferable paying method?




The second option is to leave the radio buttons as they are, so only JavaScript changes are required:

$(document).ready(function(){
    $("input:radio:checked").data("chk",true);
    $("input:radio").click(function(){
        $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
        $(this).data("chk",!$(this).data("chk"));
        $(this).prop("checked",$(this).data("chk"));
    });
});

And the final result is:

What is favorite time?



What is your preferable paying method?




Now the radio buttons behaves like single-choice checkboxes.

Enjoy.

4 comments

Thanks for great example, i need somthing like this only . i am so happy for great post .

Thanks Man

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.