Difference between a Radio button and a Checkbox in HTML

Hello everyone 👋

Ever wondered the difference between a Radio button and a Checkbox? Well we all may answer this question saying that in a radio button only one option can be selected at a time and in check box, we can select multiple ones. That concept is entirely wrong. Given a small example for a Radio button and a checkbox.

Here the shape of the options is different when comparing both. Also we can select multiple items in both. Then what’s the use of introduction two concepts? Yes, there’s a use for it and that’s the real difference between them. The difference lies in the internals of these concepts. That is, the way in which data is stored in both is different. In Radio button the data obtained from the user is stored in a simple variable, say ‘x’. Consider there are two options, ‘male' and ‘female’. On selecting ‘male' option, automatically the value ‘male’ get stored in x and when we select ‘female’, the existing value ‘male’ in ‘x' gets replaced by value ‘female’. In simple words a Radio button will be having its storage as variable that can store only one value at a time.

Now, coming to the case of Checkbox. Checkbox is introduced with a goal to select multiple items at one time. So the values selected are stored in a list/array which has the capability for storing more than one item at a time. Let me explain it with an example, consider a question in which you are asked to select your skills from 10 skills provided. Each skills are provided with Checkbox against labels. Now when you click first Checkbox, an array/list is created say X (X = { }) which stored the first option you selected, and whichever options you select from that 10 skills listed, all of that values will be stored in that respective list/array.

In a nutshell, we can say that Radio button uses a simple variable for storing value, while Checkbox uses an array/list concept for storing values.

I hope you got some important peice of information from my little article that I shared.

Thank You.