RSS
 

Make the radio buttons behave like single-choice checkboxes

27 Nov

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:

1
2
3
4
5
6
7
8
9
10
11
<form method="post">
    <h4>What is favorite time?</h4>
    <label><input type="radio" name="question1" value="morning" /> Morning</label>
    <label><input type="radio" name="question1" value="noon" /> Noon</label>
    <label><input type="radio" name="question1" value="evening" /> Evening</label>
    <h4>What is your preferable paying method?</h4>
    <label><input type="radio" name="question2" value="cc" /> Credit Card</label>
    <label><input type="radio" name="question2" value="check" /> Check</label>
    <label><input type="radio" name="question2" value="paypal" /> Paypal</label>
    <label><input type="radio" name="question2" 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:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <form method="post">
        <h4>What is favorite time?</h4>
        <label><input type="checkbox" name="question1" value="morning" /> Morning</label>
        <label><input type="checkbox" name="question1" value="noon" /> Noon</label>
        <label><input type="checkbox" name="question1" value="evening" /> Evening</label>
        <h4>What is your preferable paying method?</h4>
        <label><input type="checkbox" name="question2" value="cc" /> Credit Card</label>
        <label><input type="checkbox" name="question2" value="check" /> Check</label>
        <label><input type="checkbox" name="question2" value="paypal" /> Paypal</label>
        <label><input type="checkbox" name="question2" 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:

    1
    2
    3
    4
    5
    6
    // JavaScript code
    $(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?




  2. The second option is to leave the radio buttons as they are, only JavaScript changes are required:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // JavaScript code
    $(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.

 

Tags: , , , , , , , , ,

Leave a Reply