Use checkbox as radio button: Customize default nature using Javascript and jQuery

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Different HTML elements have their own features. ‘Checkbox’ allows you to select multiple inputs while ‘radio button’ is limited to a single entry only.

Checkboxes look more attractive than radio buttons and that’s why most developers use it in place of radio buttons.

If you’re one of them then read our tutorial as we gonna tell you how you can easily provide features of radio buttons to checkbox.

Here is the default nature of checkbox (you can select multiple options),

And this is our modified version of checkbox (only one option at a time like radio button),

Stepwise instructions with code

We’ll can use JavaScript or jQuery to do this. Lets first seeĀ our HTML code. It has 4 checkboxes with id, name and class attribute.

When a checkbox is clicked, the selectcb(this) is called. The function carries object of the clicked checkbox.


<form id='form1' name='form1'>

 <input type='checkbox' id='cb1' name='cb1' class='cb' onclick=selectcb(this) value='Orange'>Orange
 <input type='checkbox' id='cb2' name='cb2' class='cb' onclick=selectcb(this) value='Mango'>Mango
 <input type='checkbox' id='cb3' name='cb3' class='cb' onclick=selectcb(this) value='Grapes'>Grapes
 <input type='checkbox' id='cb4' name='cb4' class='cb' onclick=selectcb(this) value='Leechi'>Leechi

</form>

By default, all four of these checkboxes can be selected but we want only one to be checked at a time just like radio button.

We can do this in 2 ways, one using JavaScript and the other one using jQuery.

1. In the JavaScript code, we first uncheck all checkboxes [LOC 5-9], then check only the current checkbox [LOC 10] and displays the checkbox value [LOC 11]. See the code carefully,

<script language='Javascript'>

 function selectcb(ele)
 {
 var allcb=document.getElementsByClassName('cb');
 for(i=0;i<allcb.length;i++)
 {
 allcb[i].checked=false;
 }
 ele.checked=true;
 alert(ele.value);
 }

</script>

2. The same can be done much easily using jQuery. Here is the code,

[LOC 3-6] unchecking all cboxes, [LOC 7-11] checking the lastest one and [LOC 10] showing the value of currently active checkbox.

<script language='Javascript'>

 $('.cb').click(function()
 {
 $('.cb').attr('checked',false);
 });
 $('.cb').click(function()
 {
 $(this).attr('checked',true);
 alert($(this).val());
 });

</script>

When using the jQuery method, make sure you remove onclick event – onclick=selected(this) from the HTML code.

blog comments powered by Disqus