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?

Morning
Noon
Evening

What is your preferable paying method?

Credit Card
Check
Paypal
Cash

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?

Morning
Noon
Evening

What is your preferable paying method?

Credit Card
Check
Paypal
Cash

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:

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:

Now the radio buttons behaves like single-choice checkboxes.

Enjoy.